使用jQuery获取input值并在alert()中展示遇问题，求排查

嘿，刚入门jQuery遇到这种小问题很正常，我来帮你捋清楚～

你的代码是在DOM刚加载完成的瞬间就去获取#input的value值了，但这时候用户还没来得及在输入框里输入任何内容，所以input变量拿到的是空字符串，alert出来自然看不到你想要的输入内容啦。

你需要把“获取输入值并alert”的操作，绑定到某个用户触发的事件上（比如点击按钮、输入完成后移开焦点，甚至按下回车键），这样才能拿到用户输入后的内容。下面给你几个实用的例子：

例子1：点击按钮时展示输入内容 #

先给HTML加个触发按钮：

<input id="input" type="text" placeholder="Input here">
<button id="showBtn">点我看输入内容</button>

然后修改jQuery代码：

$(function(){
  // 给按钮绑定点击事件
  $('#showBtn').click(function(){
    var inputVal = $('#input').val();
    alert(inputVal);
  });
});

例子2：输入框失去焦点时自动展示 #

当用户输入完点击页面其他地方，输入框失去焦点时触发：

$(function(){
  $('#input').blur(function(){
    var inputVal = $(this).val();
    alert(inputVal);
  });
});

例子3：实时监听输入内容（边输入边展示） #

如果想实时获取用户输入的内容，可以监听input事件：

$(function(){
  $('#input').on('input', function(){
    var inputVal = $(this).val();
    // 这里每次输入一个字符就会弹一次，你也可以改成把内容显示在页面的某个元素里，比如<div id="result"></div>
    // $('#result').text(inputVal);
    alert(inputVal);
  });
});

额外小技巧：按回车键触发 #

很多用户习惯输完按回车确认，你可以监听回车键：

$(function(){
  $('#input').keypress(function(e){
    if(e.which === 13){ // 回车键的键码是13
      var inputVal = $(this).val();
      alert(inputVal);
    }
  });
});

内容的提问来源于stack exchange，提问作者Duncan Skilton