Question

当用户填写表单时，我想创建一个特殊代码。

代码将是每个输入的前两个字母（输入＃1，输入＃2，输入＃3）。

键入时，“代码”将存储在变量中，并设置为输入＃4的值。

这是我的HTML：

<form id="gravity">
    <li>
        <input type="text" id="one"/>
    </li>
    <li>
        <input type="text" id="two" />
    </li>
    <li>
        <input type="email" id="three" />
    </li>
    <li>
        <label>Code:</lable>
        <input type="text" id="four" />
    </li>

</form>

这是我的jQuery：

$(function() {

 $( "input#one" ).keyup(function() {
    var el1 = $( this ).val().substr(0,2);
}).keyup();

 $( "input#two" ).keyup(function() {
    var el2 = $( this ).val().substr(0,2);
}).keyup();

 $( "input#three" ).keyup(function() {
    var el3 = $( this ).val().substr(0,2);
}).keyup();

var el4 = el1 + el2 + el3;
$("input#four").attr('value', el4);


});

因此，如果用户输入名字（输入＃1）：William，姓氏（输入＃2）：Tell和电子邮件（输入＃3）：williamtell@gmail.com - ＆GT;代码为：witewi

我的jQuery在哪里出错？

非常感谢您的投入！ Fiddle

Answer 1

您可以定义无法从外部上下文访问的局部变量el1，el2，el3

尝试更早地定义它，如下所示：

$(function() {
   var el1, el2, el3;
   $( "input#one" ).keyup(function() {
      el1 = $( this ).val().substr(0,2);
      var el4 = el1 + el2 + el3;
   $("input#four").attr('value', el4);
}).keyup();

另外，为了自动更新代码输入，您必须在事件处理程序

中为其赋值

https://jsfiddle.net/dmy6o1wm/2/

Answer 2

你正在调用$（function（）{}）。此函数将执行一次，并将事件侦听器添加到您的输入（前三个）元素。最初它们没有任何价值。所以你得到了null。所以调用一些函数来控制最终的el4值。

Answer 3

instead of using local variable use as global and call the concatenate el4 value on keypress of input like this $("input").keypress

$(function() {
    var flag_1 = false, el1 = "", el2 = "", el3 = "", el4 = "";
    $("input").keyup(function(){
        el1 = $( "input#one" ).val();
        el2 = $( "input#two" ).val();
        el3 =  $( "input#three" ).val();        
       var el4 = el1 + el2 + el3;
        $("input#four").attr('value', el4);
    })

});


https://jsfiddle.net/rajen_ranjith/dmy6o1wm/9/

Answer 4

当您声明var变量仅存在于容器中时，它将被声明，因此在函数完成后el1等将不再存在。

此外，这段代码只能在页面加载后运行......

var el4 = el1 + el2 + el3;
$("input#four").attr('value', el4);

你需要做的是每次重建它，把它放在一个函数中并调用函数......

$(function() {
  var el1 = "", el2 = "", el3 = "";

  $( "input#one" ).keyup(function() {
    el1 = $( this ).val().substr(0,2);
    buildel4();
  });
 
  $( "input#two" ).keyup(function() {
    el2 = $( this ).val().substr(0,2);
    buildel4();
  });

  $( "input#three" ).keyup(function() {
    el3 = $( this ).val().substr(0,2);
    buildel4();
  });
  
  function buildel4() {
    var el4 = el1 + el2 + el3;
    $("input#four").attr('value', el4);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="gravity">
    <li>
        <input type="text" id="one"/>
    </li>
    <li>
        <input type="text" id="two" />
    </li>
    <li>
        <input type="email" id="three" />
    </li>
    <li>
        <label>Code:</lable>
        <input type="text" id="four" />
    </li>

</form>

这是Live Demo using jsfiddle

（另外，你不需要对每一个.keyup();进行第二次调用）

Answer 5

您可以在提交表单时更轻松，更动态地获取此信息，如下面的

＆＃13;

$(function() {
    $("#click").click(function() {
        var e1 = '';
        $('input[type="text"],input[type="email"]').each(function(){
            //console.log($( this ).val().substr(0,2));
            e1 += $( this ).val().substr(0,2);
        });
        $('#four').val(e1);                   
    });                  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form id="gravity">
    <li>
       One <input type="text" id="one"/>
    </li>
    <li>
        Two<input type="text" id="two" />
    </li>
    <li>
        Three<input type="email" id="three" />
    </li>
    <li>
        <label>Code:</lable>
        <input type="text" id="four" />
    </li>
    <li><button id="click">click</button></li>
</form>

＆＃13;

jQuery - 如何在键入时检索输入值？

5 个答案: