javascript - 使用 JavaScript/jQuery 将字符串值剪切并粘贴到制表符后的下一个输入

Question

我想知道如何使用 javascript/jquery 拆分字符串，如下所示 -

abc543567   abc543678   abc223416   abc634567

分成四个输入，这样每个组都可以移到一个单独的输入中。基本上，当我将这个字符串复制到第一个输入中时，第一组可以保留在第一个输入中，第二个可以在第二个输入中移动，依此类推。在示例中，在组之间，我使用制表符作为分隔符。这是输入的 html:https://jsfiddle.net/2sb6ggz0/

HTML 的更新:

<table>
<tr>
    <td>
        <form name="form1" action="#" method="get" target="">
            <input id="input1" name="query" placeholder="Input 1" type="search" size="20">
        </form>
    </td>
    <td>
        <form name="form2" action="#" method="get" target="">
            <input id="input2" name="query" placeholder="Input 2" type="search" size="20">
        </form>
    </td> 
    <td>
        <form name="form3" action="#" method="get" target="">
            <input id="input3" name="query" placeholder="Input 3" type="search" size="20">
        </form>
    </td>
    <td>                    
        <form name="form4" action="#" method="get" target="">
            <input id="input4" name="query" placeholder="Input 4" type="search" size="20">
        </form>
    </td>
</tr>
</table>

有什么办法可以做到这一点吗？

Answer 1

您可以通过检测第一个输入中的内容来响应 paste 事件，如果合适，将它的位移动到其他三个(参见评论):

// Text to paste: abc543567   abc543678   abc223416   abc634567
// Hook "paste" on the first input
$("#input1").on("paste", function() {
  // Remember the input and wait a second so the paste gets filled in
  var input = this;
  setTimeout(function() {
    // See if it matches our format
    var n;
    var value = input.value;
    var m = /^[ \t]*([\w\d]{9})[ \t]+([\w\d]{9})[ \t]+([\w\d]{9})[ \t]+([\w\d]{9})[ \t]*$/.exec(value);
    if (m) {
      // It does, save the values to the other fields
      for (n = 1; n <= 4; ++n) {
        $("#input" + n).val(m[n]);
      }
    }
  }, 0);
});

<table>
<tr>
    <td>
        <form name="form1" action="#" method="get" target="">
            <input id="input1" name="query" placeholder="Input 1" type="search" size="20">
        </form>
    </td>
    <td>
        <form name="form2" action="#" method="get" target="">
            <input id="input2" name="query" placeholder="Input 2" type="search" size="20">
        </form>
    </td> 
    <td>
        <form name="form3" action="#" method="get" target="">
            <input id="input3" name="query" placeholder="Input 3" type="search" size="20">
        </form>
    </td>
    <td>                    
        <form name="form4" action="#" method="get" target="">
            <input id="input4" name="query" placeholder="Input 4" type="search" size="20">
        </form>
    </td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您需要调整正则表达式以接受正确的格式；我只是告诉它在四组中允许恰好 9 个“单词”字符和数字，由一个或多个制表符或空格分隔。