我有多个带有设置字符限制的文本框,它们共同组成一个代码。由于各种原因,盒子中的值是分开的。我希望能够在第一个文本框中粘贴完整的代码,并让它自动填充所有文本框。对于这种情况,有没有办法在javascript或jquery库中执行此操作?
目前我在每个文本框上使用jQuery autotab,我更喜欢保留该功能。
答案 0 :(得分:1)
你当然可以在JS中这样做。我不知道有一个图书馆可以帮你完成。从臀部拍摄,但也许是这样的:
示例HTML
<input type='text' data-auto-pop='true' data-group='1' data-char-limit='3'/>
<input type='text' data-auto-pop='true' data-group='1' data-char-limit='3'/>
<input type='text' data-auto-pop='true' data-group='1' data-char-limit='4'/>
示例JS
$("input[data-auto-pop='true']").change(function () {
var $this = $(this), val = $this.val();
if ($this.data("char-limit") > val.length) {
return;
} else {
var setVal = function() {
$this.val(val.slice(0, $this.data("char-limit"));
val = val.slice($this.data("char-limit"));
};
setVal();
while ($this.closest("input[data-group='"+$this.data("group")+"']") && val.length > 0) {
$this = $this.closest("input[data-group='"+$this.data("group")+"']");
setVal();
}
}
}
可能有一些错误,但你应该明白这一点。
答案 1 :(得分:1)
<强> DEMO 强>
使用onpaste事件从用户剪贴板中捕获数据。然后获取该数据并生成适合您输入的数组。然后使用.val()
设置这些值<强> JS 强>
$(function(){
// get first input element
pastable = document.getElementById('pastable');
// listen for the user to paste
pastable.onpaste = function(e){
// retrieve paste data as an array split to each 3 characters (3 dots below in regex)
var inputArray = e.clipboardData.getData('text/plain').match(/.../g);
// loop over input fields
$('input').each(function(i){
// place data from paste
$(this).val(inputArray[i]);
});
};
});
<强> HTML 强>
<input type='text' id="pastable" maxlength="3"/>
<input type='text' maxlength="3" />
<input type='text' maxlength="3" />