更改后得到html元素值

Question

在视图中，我试图在我改变它之后检索html输入框的值。换句话说，加载的页面为

<input id="input_one" type="text" value = "apple" /> 

当页面打开时，输入框中包含苹果词。我点击这个输入框，删除单词苹果，然后写入单词“橙色”代替。当我做到以下几点：

$('#input_one').click(function() { 
    console.log($('#input_one').attr('value')); 
}); 

结果是“苹果”不是橙色。有没有办法在不提交表单的情况下获得我刚刚输入的新值？我想在页面上使用JavaScript来让客户端验证，如果值是什么，提交表单，否则显示消息“值必须是什么”

也许我可以做这样的事情

$('#input_one').attr('value', 'new value'); 

但是我如何获得刚投入的新价值呢？这个新值存储在哪里？ innerHTML的？或文本（）可能？

Answer 1

attr()将得到<input>的属性，这是该元件的初始值。

元素的当前值是属性。如果我们想获得的任何元素属性：

$('#input_one')[0].value;  
$('#input_one').prop('value'); 

然而， jQuery有完美的方法，.val(),你：

$('#input_one').val(); 

---

What is the difference between attribute and property?

Answer 2

尝试这样：

$("#input_one").blur(function() { 
    alert(this.value); 
}); 

此提醒输入框的每一个你把它聚焦时间的新值。

Answer 3

尝试.val()代替：

$('#input_one').val();