Question

我有一个关于在6个不同的输入文本字段中复制和粘贴字符串（例如“123456”）的问题。输入文本字段的maxlength也为1，我首先必须从字段中删除此属性，以便在每个输入字段中粘贴整个6个字符。我现在的解决方案是有效的，但我遇到了一个小问题，因为只要我在第一个盒子上粘贴整个6位数字，它就会将整个字符串放在第一个盒子上一小段时间，然后它将数字放在其他字段上。问题是，如何才能看到第一个框上粘贴的整个数字，并且只显示一个数字？这是一个有效的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Heading Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body>

    <input type="text" name="numberInput" value="" tab-index="0" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="1" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="2" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="3" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="4" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="5" placeholder="#" maxlength="1">

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
        $('input[type="text"]').bind('paste', function() {
            var self = this,
                textArray;

            // Short pause to wait for paste to complete, remove attribute for it to paste the 6 digits into the text boxes
            $('input[type="text"]').removeAttr('maxlength');
            setTimeout( function() {
                textArray = $(self).val().split('');
                $('input[type="text"]').each(function(index,element){
                  $(element).val(textArray[index]);
                  $(element).attr('maxlength','1');
                });
            }, 100,function(){
                //Do some action needed
            });
        });
      });
    </script>
  </body>
</html>

非常感谢。

Answer 1

您可以使用paste事件的属性来阻止默认操作并获取预期的粘贴文本，然后执行您的逻辑，删除setTimeout，因为您没有使用本机粘贴事件了。

此外，无需删除和添加我可以看到的maxlength属性 - 您仍然只插入一个字符，因为我们绕过本机粘贴事件，所以完整的字符串永远不会真的点击任何输入。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Heading Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body>

    <input type="text" name="numberInput" value="" tab-index="0" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="1" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="2" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="3" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="4" placeholder="#" maxlength="1">
    <input type="text" name="numberInput" value="" tab-index="5" placeholder="#" maxlength="1">

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
        $('input[type="text"]').bind('paste', function(e) {
          e.preventDefault();
          var text = e.originalEvent.clipboardData.getData('text');
          var textArray = text.split('');

          $('input[type="text"]').each(function(index,element){
            $(element).val(textArray[index]);
          });
        });
      });
    </script>
  </body>
</html>

＆＃13;

复制字符串文本，并将其粘贴到6个输入文本框中，在第一个框中显示完整字符串

1 个答案: