无法alert输入框文本值？如何正确获取input文本框的值

嘿，我来帮你搞定这个困扰！你遇到的问题核心在于混淆了HTML属性和DOM元素属性——attr('value')获取的是你写在HTML标签上的初始value属性值，如果你一开始没给这个input设置value属性，那它自然会返回undefined，而且这个值不会随着用户输入实时更新。

下面给你几种靠谱的获取实时输入值的方法：

方法1：使用jQuery的val()方法（最推荐） #

这是jQuery专门为表单元素提供的取值方法，完美适配输入框、下拉框等表单控件，能直接拿到当前的实时值：

$('#editfileFormTitleinput').on('input', function() {
  alert($(this).val());
});

方法2：原生JS直接取value属性 #

在事件回调里，this就是当前触发事件的input DOM元素，直接访问它的value属性就能拿到实时值，不需要jQuery包装：

$('#editfileFormTitleinput').on('input', function() {
  alert(this.value);
});

方法3：使用jQuery的prop()方法 #

prop()是用来获取DOM元素的属性（区别于HTML标签属性），输入框的实时值就存在这个DOM属性里：

$('#editfileFormTitleinput').on('input', function() {
  alert($(this).prop('value'));
});

简单总结下：attr()对应HTML源码里的属性，prop()对应DOM对象的属性，而用户输入的实时内容是存在DOM的value属性里的，所以用val()或者直接this.value是最直接的方式~

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