如何获取text类型input输入框中用户输入的文本内容

错误原因 #

• $('input[type=text]')获取到的是jQuery封装对象，不是原生DOM节点，直接访问原生属性innerHTML、value会返回undefined
• .text()、.html()是用于读取普通元素内部嵌套内容的方法，input属于单标签表单元素，不存在内部嵌套内容，因此无法通过这两个方法拿到输入值
• 若e.target.value也返回undefined，通常是页面存在多个匹配的input元素，选择器匹配到了无输入值的其他input，或事件绑定目标异常

正确实现代码 #

推荐使用jQuery专门用于读取表单值的val()方法：

$('input[type=text]').keyup(function(e){
  if(e.which == 13){
    // 直接使用当前触发事件的元素获取值，避免多元素匹配问题
    alert($(this).val());
  }
});

可选原生写法 #

如果需要使用原生属性读取，需要先把jQuery对象转为原生DOM节点：

// 写法1：通过索引取jQuery对象里的原生DOM
alert($('input[type=text]')[0].value);
// 写法2：直接用事件对象里的原生目标元素
alert(e.target.value);

优化建议 #

• 如果页面存在多个文本输入框，建议给目标输入框添加单独的id属性，用id选择器绑定事件，避免匹配错误
• 可使用e.key === 'Enter'替代e.which == 13判断回车键，代码可读性更强

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