0

我写了一小部分代码

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Test Page</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body {
    font-family: sans-serif;
  }
  p {
    margin: 0px;
  }
</style>
</head>
<body>
  <form>
    <input type='text'>
  </form>
</body>
</html>

江青

jQuery(function($) {

      $('form input[type=text]').change(fileChangeHandler);
      function fileChangeHandler() {
        var form = $(this).closest('form');
        $('<input type="text">').change(fileChangeHandler).appendTo(form);
      }


    });

它工作得几乎很好，但是：我必须在填写一个值后按回车键（这些值只是整数） - 是否可以在输入 24 个数字后使其自动输入？< 然后它会自动进入下一个字段，我也会这样做。

我真的不知道该怎么做。给我一些提示。

4

3 回答 3

0 
jQuery(function ($) {

    $('form input[type=text]').keyup(function(){
        var form = $(this).closest('form');
        if ($(this).val().length == 24)
            $('<input type="text">').appendTo(form).focus();
    }

});

像上面这样的东西可能会有所帮助。

于 2013-11-07T20:44:13.030 回答
0

更新：

这是一个有效的 JSFiddle：链接

鉴于：

<form>
    <input type='text'>
</form>

这是你的 jQuery：

$('input').keyup(function (){
    var intLength = $(this).val().length;

    if(intLength === 24){
        $('<input type="text" />').appendTo('form');
        $("input").last().focus();   
    }
});
于 2013-11-07T20:46:26.080 回答
0

你可以这样做，

$('form input').on("propertychange keyup input paste", addInput);
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            $('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
        }}

http://jsfiddle.net/5KZtB/

编辑 - 存储输入值

要将字段的值存储在数组中，您可以在创建新字段之前推送每个值。例如，

jQuery(function($) {

    var values = [];

      $('form input[type=text]').change(fileChangeHandler);
      function fileChangeHandler() {
        var form = $(this).closest('form');        
      }
     var form = $(this).closest('form');

    $('form input').on("propertychange keyup input paste",

    addInput);
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            $('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
            values.push($(this).val());
            //console.log(values);
        }}

    });

http://jsfiddle.net/5KZtB/1/

EDIT2 - 只允许数字

....
    $('form input').on("propertychange keyup input paste",

    addInput);
    onlyNums($('form input'));
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            var newInput = $('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
            onlyNums(newInput);
            values.push($(this).val());
            console.log(values);
        }}

    function onlyNums($elem){
        $elem.keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
    }

http://jsfiddle.net/5KZtB/2/

EDIT3 - 删除输入元素的字段

一种粗略的方法可能是在 span 元素内添加输入以及带有 x 标记的链接以删除特定输入。所以代码稍作修改如下，

HTML

<form>
    <span class="input-component"><input type="text"/><a href=#>[x]</a></span>
  </form>

JS

jQuery(function($) {

    var values = [];

      $('form input[type=text]').change(fileChangeHandler);
      function fileChangeHandler() {
        var form = $(this).closest('form');        
      }
     var form = $(this).closest('form');

    $('form .input-component input').on("propertychange keyup input paste",

    addInput);
    onlyNums($('form .input-component input'));
    initializeDelLink($('form .input-component'));
    function addInput() {
        var remainingChars = $(this).val().length;
        if (remainingChars == 24) {
            var $newInputComponent = $('<span class="input-component"><input type="text"/><a href=#>[x]</a></span>').change(fileChangeHandler).appendTo('form').find('input').focus().on("propertychange keyup input paste",addInput).end();
            initializeDelLink($newInputComponent);
            var $newInput = $newInputComponent.find('input');
            onlyNums($newInput);
            values.push($(this).val());
            console.log(values);
        }}

    function initializeDelLink($elem){
        var $delLink=$elem.find('a');
            $delLink.click(function(){alert();
                $(this).parent('.input-component').remove();
            });
    }

    function onlyNums($elem){
        $elem.keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
    }

    });

http://jsfiddle.net/5KZtB/3/

于 2013-11-07T20:52:52.003 回答