每當欄位中有輸入時，是否可以在JQUERY中撰寫一個函式？-有解無憂

我有以下 HTML 代碼，無論輸入欄位編號如何，只要輸入欄位中有輸入，我都想使用欄位 ID 呼叫函式。

<input type="text" pattern="[0-9]*" name="code" maxlength="1" autofocus="autofocus" id="input1" class="input1"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input2" class="input2"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input3" class="input3"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input4" class="input4"/>

而不是下面的，我想為所有人呼叫一個函式。

$("#input1").on('input', function () {
    console.log("this is input1");
});

$("#input2").on('input', function () {
    console.log("this is input2");
});

$("#input3").on('input', function () {
    console.log("this is input3");
});
$("#input4").on('input', function () {
    console.log("this is input4");
});

uj5u.com熱心網友回復：

您可以使用此選擇器來定位所有輸入$('input[id^=input]')。

input[id^=input]意味著它將與輸入的 id 開頭的所有輸入一起使用input

$("input[id^=input]").on('input', function() {
  console.log("this is "   this.id);
});

Show code snippet

$("input[id^=input]").on('input', function() {
  console.log("this is "   this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" autofocus="autofocus" id="input1" class="input1" />
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input2" class="input2" />
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input3" class="input3" />
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input4" class="input4" />

uj5u.com熱心網友回復：

很多方法。其中之一是選擇所有輸入并觸發輸入法

$("input").on("input", function (e) {
  console.log("this is input", e.target.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" autofocus="autofocus" id="input1" class="input1"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input2" class="input2"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input3" class="input3"/>
<input type="text" pattern="[0-9]*" name="code" maxlength="1" id="input4" class="input4"/>

uj5u.com熱心網友回復：

jQuery$()查詢選擇器函式接受多個以逗號分隔的選擇器。

$("#input1,#input2,#input3,#input4").on('input', function () {
    console.log("this is input from input 1, 2, 3 and 4");
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/512590.html

標籤：javascripthtmljQuerycss

上一篇：我想在Bootstrap的h-100Box上方和下方創建一個空間

下一篇：SymfonyAPI平臺操作