jQuery

Question

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

代码将是每个输入的前两个字母（input#one、input#two、input#three）。

键入时，"code" 将存储在一个变量中并设置为输入#four 的值。

这是我的 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);


});

因此，如果用户输入名字 (input#one)：William，姓氏 (input#two)：Tell 和电子邮件 (input#three)：williamtell@gmail.com -> 代码为：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

当你声明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 3

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

Answer 4

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

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

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

Answer 5

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/

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

jQuery - How to retrieve input values when Typing?

javascript

variables

input

keyup