Fatal编程技术网
  • jquery/
  • Jquery 不按enter键生成表单输入文本（在24个数字之后）

Jquery 不按enter键生成表单输入文本（在24个数字之后）

jquery

Jquery 不按enter键生成表单输入文本（在24个数字之后）,jquery,Jquery,我写了代码的一小部分 <!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]&

我写了代码的一小部分

<!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>


测试页
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
身体{
字体系列：无衬线；
}
p{
边际：0px；
}
JQ

jQuery（函数（$）{
$（'forminput[type=text]'）。更改（fileChangeHandler）；
函数fileChangeHandler（）{
var form=$（this）.closest（'form'）；
$（''）.change（fileChangeHandler）.appendTo（form）；
}
});
它几乎可以正常工作，但是：我必须在填充值后按enter键（值仅为整数）-是否可以在键入24个数字后使其自动输入然后它会自动进入下一个字段，我也会这样做

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

jQuery（函数（$）{

jQuery(function ($) {

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

});


$（'forminput[type=text]'）。keyup（function（）{
var form=$（this）.closest（'form'）；
if（$（this）.val（）.length==24）
$（''）.appendTo（form.focus（）；
}
});
类似上面的内容可能会有所帮助。

更新：

下面是一个正在工作的JSFIDLE：

鉴于：

<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();   
    }
});

$（'input'）.keyup（函数（）{
var intLength=$（this）.val（）.length；
如果（intLength==24）{
$（''）。附录（'form'）；
$（“输入”）.last（）.focus（）；
}
});
您可以按如下方式操作

$('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);
        }}

$（'form input'）。在（“propertychange键控输入粘贴”，addInput）上；
函数addInput（）{
var remainingChars=$（this）.val（）.length；
如果（剩余字符==24）{
$（“”）.change（fileChangeHandler）.appendTo（'form'）.focus（）.on（“propertychange键控输入粘贴”，addInput）；
}}

编辑-存储输入值

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

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);
        }}

    });

jQuery（函数（$）{
var值=[]；
$（'forminput[type=text]'）。更改（fileChangeHandler）；
函数fileChangeHandler（）{
var form=$（this）.closest（'form'）；
}
var form=$（this）.closest（'form'）；
$（'form input'）。在（“propertychange键控输入粘贴”，
额外投入）；
函数addInput（）{
var remainingChars=$（this）.val（）.length；
如果（剩余字符==24）{
$（“”）.change（fileChangeHandler）.appendTo（'form'）.focus（）.on（“propertychange键控输入粘贴”，addInput）；
value.push（$（this.val（））；
//console.log（值）；
}}
});

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(); 
            }   
        }
    });
    }

。。。。
$（'form input'）。在（“propertychange键控输入粘贴”，
额外投入）；
onlyNums（$（‘表单输入’）；
函数addInput（）{
var remainingChars=$（this）.val（）.length；
如果（剩余字符==24）{
var newInput=$（''）.change（fileChangeHandler）.appendTo（'form'）.focus（）.on（“propertychange keyup输入粘贴”，addInput）；
onlyNums（newInput）；
value.push（$（this.val（））；
console.log（值）；
}}
函数onlyNums（$elem）{
$elem.keydown（功能（事件）{
//仅允许退格和删除
if（event.keyCode==46 | | event.keyCode==8）{
//让它发生吧，什么都不要做
}
否则{
//确保它是一个数字并停止按键
如果（event.keyCode<48 | | event.keyCode>57）{
event.preventDefault（）；
}   
}
});
}

EDIT3-用于删除输入元素的字段

一种粗略的方法是在span元素中添加输入，以及一个带有x标记的链接，用于删除特定的输入

$('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);
        }}
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(); 
            }   
        }
    });
    }

    });

jQuery（函数（$）{
var值=[]；
$（'forminput[type=text]'）。更改（fileChangeHandler）；
函数fileChangeHandler（）{
var form=$（this）.closest（'form'）；
}
var form=$（this）.closest（'form'）；
$（'form.input component input'）。在（“propertychange键控输入粘贴”，
额外投入）；
onlyNums（$（'form.input-component-input'）；
初始化Delink（$（'form.input component'）；
函数addInput（）{
var remainingChars=$（this）.val（）.length；
如果（剩余字符==24）{
var$newInputComponent=$（''）.change（fileChangeHandler）.appendTo（'form'）.find（'input'）.focus（）.on（'propertychange keyup input paste'，addInput）.end（）；
初始化Delink（$newInputComponent）；
var$newInput=$newInputComponent.find（'input'）；
onlyNums（$newInput）；
value.push（$（this.val（））；
console.log（值）；
}}
函数初始化Delink（$elem）{
var$delLink=$elem.find（'a'）；
$delLink.click（函数（）{alert（）；
$（this）.parent（'.input component'）.remove（）；
});
}
函数onlyNums（$elem）{
$elem.keydown（功能（事件）{
//仅允许退格和删除
if（event.keyCode==46 | | event.keyCode==8）{
//让它发生吧，什么都不要做
}
否则{
//确保它是一个数字并停止按键
如果（event.keyCode<48 | | event.keyCode>57）{
event.preventDefault（）；
}   
}
});
}
});

我不确定我是否理解你的问题……如果我的示例不适合你，你需要它做什么？这太棒了：3请告诉我我可以作为数组（）获得输入的字段somehow@user2945583您是指包含您在字段中输入的值的数组吗？是的，因为我想将它们插入数据库。最后您能告诉我如何检索var数据吗？