javascript 在多个输入字段上粘贴多个数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11804064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pasting multiple numbers over multiple input fields
提问by flinx777
I've got a form on my site using 6 input fields. The site visitor simply enters a 6 digit code into these 6 boxes. The thing is that they'll get the 6 digit code and it would be ideal to allow them to simply copy the 6 digit code we send them into these input fields by simply putting pasting into the first input field and having the remaining 5 digits go into the remaining 5 input fields. It would just make it much easier than having to manually enter each digit into each input field.
我的网站上有一个使用 6 个输入字段的表单。站点访问者只需在这 6 个框中输入 6 位代码即可。问题是他们将获得 6 位代码，最理想的做法是让他们简单地将我们发送给这些输入字段的 6 位代码复制到这些输入字段中，只需将粘贴到第一个输入字段中，然后将剩余的 5 位数字输入即可进入剩余的 5 个输入字段。与必须手动将每个数字输入每个输入字段相比，它只会使它更容易。
Here's the code we're currently using, but it can easily be changed to accomplish what is described above:
这是我们当前使用的代码，但可以轻松更改以完成上述内容：
<input type="text" maxlength="1" class="def-txt-input" name="chars[1]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[2]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[3]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[4]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[5]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[6]">
I saw a posting similar to this here: Pasting of serialnumber over multiple textfields
我在这里看到了类似的帖子：Pasting of serialnumber over multiple textfields
But it doesn't have the solution I'm looking for. Ideally this could be pulled off using jQuery or plain JavaScript.
但它没有我正在寻找的解决方案。理想情况下，这可以使用 jQuery 或普通 JavaScript 来实现。
回答by Nope
Edit
编辑
I didn't like the timer solution I used in the pasteevent and the complexity of just using the inputor pasteevent.
我不喜欢我在paste事件中使用的计时器解决方案以及仅使用inputorpaste事件的复杂性。
After looking at this for a while I added a solution which uses a hybrid between the 2. The code seems to do all that is required now.
看了一会儿后，我添加了一个解决方案，该解决方案使用了 2 之间的混合。代码似乎完成了现在所需的所有工作。
The Script:
剧本：
var $inputs = $(".def-txt-input");
var intRegex = /^\d+$/;
// Prevents user from manually entering non-digits.
$inputs.on("input.fromManual", function(){
if(!intRegex.test($(this).val())){
$(this).val("");
}
});
// Prevents pasting non-digits and if value is 6 characters long will parse each character into an individual box.
$inputs.on("paste", function() {
var $this = $(this);
var originalValue = $this.val();
$this.val("");
$this.one("input.fromPaste", function(){
$currentInputBox = $(this);
var pastedValue = $currentInputBox.val();
if (pastedValue.length == 6 && intRegex.test(pastedValue)) {
pasteValues(pastedValue);
}
else {
$this.val(originalValue);
}
$inputs.attr("maxlength", 1);
});
$inputs.attr("maxlength", 6);
});
// Parses the individual digits into the individual boxes.
function pasteValues(element) {
var values = element.split("");
$(values).each(function(index) {
var $inputBox = $('.def-txt-input[name="chars[' + (index + 1) + ']"]');
$inputBox.val(values[index])
});
};?
See DEMO
见演示
回答by relipse
Here is an example of a jquery plugin that does the same thing as the original answeronly generalized.
这是一个jquery 插件的例子，它与原始答案做同样的事情，只是泛化了。
I went to great lengths to modify the original answer ( http://jsfiddle.net/D7jVR/) to a jquery plugin and the source code is here: https://github.com/relipse/jquery-pastehopacross/blob/master/jquery.pastehopacross.js
我竭尽全力将原始答案（http://jsfiddle.net/D7jVR/）修改为 jquery 插件，源代码在这里：https: //github.com/relipse/jquery-pastehopacross/blob/master /jquery.pastehopacross.js
An example of this on jsfiddle is here: http://jsfiddle.net/D7jVR/111/
jsfiddle 上的一个例子在这里：http: //jsfiddle.net/D7jVR/111/
The source as of 4-Apr-2013 is below:
2013 年 4 月 4 日的来源如下：
/**
* PasteHopAcross jquery plugin
* Paste across multiple inputs plugin,
* inspired by http://jsfiddle.net/D7jVR/
*/
(function ($) {
jQuery.fn.pastehopacross = function(opts){
if (!opts){ opts = {} }
if (!opts.regexRemove){
opts.regexRemove = false;
}
if (!opts.inputs){
opts.inputs = [];
}
if (opts.inputs.length == 0){
//return
return $(this);
}
if (!opts.first_maxlength){
opts.first_maxlength = $(this).attr('maxlength');
if (!opts.first_maxlength){
return $(this);
}
}
$(this).on('paste', function(){
//remove maxlength attribute
$(this).removeAttr('maxlength');
$(this).one("input.fromPaste", function(){
var $firstBox = $(this);
var pastedValue = $(this).val();
if (opts.regexRemove){
pastedValue = pastedValue.replace(opts.regexRemove, "");
}
var str_pv = pastedValue;
$(opts.inputs).each(function(){
var pv = str_pv.split('');
var maxlength;
if ($firstBox.get(0) == this){
maxlength = opts.first_maxlength;
}else{
maxlength = $(this).attr('maxlength');
}
if (maxlength == undefined){
//paste them all!
maxlength = pv.length;
}
//clear the value
$(this).val('');
var nwval = '';
for (var i = 0; i < maxlength; ++i){
if (typeof(pv[i]) != 'undefined'){
nwval += pv[i];
}
}
$(this).val(nwval);
//remove everything from earlier
str_pv = str_pv.substring(maxlength);
});
//restore maxlength attribute
$(this).attr('maxlength', opts.first_maxlength);
});
});
return $(this);
}
})(jQuery);
回答by McGarnagle
This shouldn't be too difficult ... add a handler for the pasteevent on the first input, and then process per the requirement.
这应该不会太难...为第一个input上的paste事件添加一个处理程序，然后根据要求进行处理。
Edit
编辑
Actually this is much trickier than I thought, because it seems there's no way to get what text was pasted. You might have to kind of hack this functionality in, using something like this (semi-working)... (see the JSFiddle).
实际上这比我想象的要棘手得多，因为似乎无法获得粘贴的文本。您可能需要使用类似这样的东西（半工作）......（参见JSFiddle）来破解这个功能。
$(document).on("input", "input[name^=chars]", function(e) {
// get the text entered
var text = $(this).val();
// if 6 characters were entered, place one in each of the input textboxes
if (text.length == 6) {
for (i=1 ; i<=text.length ; i++) {
$("input[name^=chars]").eq(i-1).val(text[i-1]);
}
}
// otherwise, make sure a maximum of 1 character can be entered
else if (text.length > 1) {
$(this).val(text[0]);
}
});
回答by Jesse Hallett
You're going to have to right some custom code. You may have to remove the maxlength property and use javascript to enforce the limit of one number per input.
您将不得不纠正一些自定义代码。您可能必须删除 maxlength 属性并使用 javascript 来强制每个输入一个数字的限制。
As dbasemane suggests, you can listen for a paste event. You can listen to keyup events too to allow the user to type out numbers without having to switch to the next input.
正如 dbasemane 所建议的，您可以监听粘贴事件。您也可以侦听 keyup 事件，以允许用户输入数字而无需切换到下一个输入。
Here is one possible solution:
这是一种可能的解决方案：
function handleCharacter(event) {
var $input = $(this),
index = getIndex($input),
digit = $input.val().slice(0,1),
rest = $input.val().slice(1),
$next;
if (rest.length > 0) {
$input.val(digit); // trim input value to just one character
$next = $('.def-txt-input[name="chars['+ (index + 1) +']"]');
if ($next.length > 0) {
$next.val(rest); // push the rest of the value into the next input
$next.focus();
handleCharacter.call($next, event); // run the same code on the next input
}
}
}
function handleBackspace(event) {
var $input = $(this),
index = getIndex($input),
$prev;
// if the user pressed backspace and the input is empty
if (event.which === 8 && !$(this).val()) {
$prev = $('.def-txt-input[name="chars['+ (index - 1) +']"]');
$prev.focus();
}
}
function getIndex($input) {
return parseInt($input.attr('name').split(/[\[\]]/)[1], 10);
}
$('.def-txt-input')
.on('keyup paste', handleCharacter)
.on('keydown', handleBackspace);
I have this code set up on jsfiddle, so you can take a look at how it runs: http://jsfiddle.net/hallettj/Kcyna/
我在 jsfiddle 上设置了这段代码，所以你可以看看它是如何运行的：http: //jsfiddle.net/hallettj/Kcyna/
回答by Vidya
HTML
HTML
<input id="input-1" maxlength="1" type="number" />
<input id="input-2" maxlength="1" type="number" />
<input id="input-3" maxlength="1" type="number" />
<input id="input-4" maxlength="1" type="number" />
jQuery
jQuery
$("input").bind("paste", function(e){
var pastedData = e.originalEvent.clipboardData.getData('text');
var num_array = [];
num_array = pastedData.toString(10).replace(/\D/g, '0').split('').map(Number); // creates array of numbers
for(var a = 0; a < 4; a++) { // Since I have 4 input boxes to fill in
var pos = a+1;
event.preventDefault();
$('#input-'+pos).val(num_array[a]);
}
});
