我有一個使用 jQuery 選擇的多選輸入框。它目前具有添加不在現有串列中的自定義值的功能。但是，我很難嘗試添加一個附加功能，該功能基本上可以格式化用戶自動輸入的數字。
例如：
用戶輸入： 12142113114444
預期輸出： 1-2-1421:1311 ZIO 4444
我已經處理了格式化數字的邏輯。我的問題是試圖將它與我的 jQuery Chosen 輸入框聯系起來。
我當前的輸入框代碼可以在這里找到：https : //jsfiddle.net/b6xupfak/
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<div style="padding: 20px;">
<label>Bootstrap jQuery Chosen</label>
<div>
<select id="num" data-placeholder="Enter a Number" class="chosen-select" style="width:350px;" tabindex="4" multiple>
<option value="1-2-1421:1311 ZIO 4444">1-2-1421:1311 ZIO 4444</option>
<option value="2-6-2862:2342 ZIO 0001">2-6-2862:2342 ZIO 0001</option>
<option value="9-4-0082:3922 ZIO 7352">9-4-0082:3922 ZIO 7352</option>
</select>
</div>
<label>Bootstrap</label>
<div>
<input id="num_no_jqc" class="form-control" maxlength="21">
</div>
</div>
我有一個 JavaScript 函式，它實作了第二個輸入框的格式，它按預期作業。但是，當我嘗試將其應用于具有 jQuery 選擇的輸入框時，它不起作用。
$('.chosen-select').chosen({}).change( function(obj, result) {
console.debug("changed: %o", arguments);
console.log("selected: " result.selected);
});
$(function (){
$("#num").on("chosen:no_results", function (evt, params) {
let elem = $("#num").siblings(".chosen-container").find(".chosen-choices .search-field:last input");
let text = elem.val().replace(/'/g, "");
text = `<button onClick="addCustomNum('${text}')" style="height: 30px; font-size: 15px;">Add NEW TMK: '${text}'</button>`;
$("#num").siblings(".chosen-container").find(".no-results").html(text);
});
});
function addCustomNum(searchStr) {
let arr = $("#num").val();
$("#num").html($("#num").html() "<option value='" searchStr "'>" searchStr "</option>");
$("#num").val(arr.concat([searchStr]));
$("#num").trigger("chosen:updated");
}
$(function () {
$('#num').keydown(function (e) {
var key = e.charCode || e.keyCode || 0;
$text = $(this);
if (key !== 8 && key !== 9) {
if ($text.val().length === 1) {
$text.val($text.val() '-');
}
if ($text.val().length === 3) {
$text.val($text.val() '-');
}
if ($text.val().length === 7) {
$text.val($text.val() ':');
}
if ($text.val().length === 12) {
$text.val($text.val() ' ZIO ');
}
}
return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
})
$('#num_no_jqc').keydown(function (e) {
var key = e.charCode || e.keyCode || 0;
$text = $(this);
if (key !== 8 && key !== 9) {
if ($text.val().length === 1) {
$text.val($text.val() '-');
}
if ($text.val().length === 3) {
$text.val($text.val() '-');
}
if ($text.val().length === 7) {
$text.val($text.val() ':');
}
if ($text.val().length === 12) {
$text.val($text.val() ' ZIO ');
}
}
return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
})
});
似乎 jQuery Chosen 有一個可能負責處理用戶輸入的特定元素，但我不太清楚它是什么。
uj5u.com熱心網友回復：
當您multiple在 select 元素中使用時，它基本上會使用 DOM 中的現有元素創建一個新元素。如果你通過開發工具檢查，你會找到它。因此，當您實際嘗試使用 獲取輸入值時Id -> num，它實際上在 DOM 中創建了不同的 Id 和輸入欄位。
而不是嘗試這個：
$('#num').keydown(function (e) {}
嘗試使用這個：
$("#num_chosen").find("input").keydown( function (e) {}
如果你打開開發工具，你會看到它創建了一個id -> num_chosen帶有輸入元素的新 div ，我所做的就是嘗試找到該元素并且它作業正常。
可行的小提琴
您可能希望根據需要提供進一步的邏輯。
注意：我不是 DOM 操作方面的專家，所以我的解釋不會像專業人士給出的那么好。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/354919.html
標籤：javascript html css bootstrap-4 jquery-选择