javascript - defaultValue 在 JavaScript 代码中不起作用

Question

这是关于 javascript .value 和 .defaultValue 的简单问题

这是我的第一个 html

<input id="txt" value="Hello">
</input>
<input type="button" id="btn" />

以及对应的js

$('#btn').click(function(){
    alert('Old Value '+ document.getElementById('txt').defaultValue);
    alert('New value ' + document.getElementById('txt').value);
});

所以上面的 html 默认情况下有 Hello，现在如果我删除一些字符并将其设为 Hel 并按下按钮，我得到的输出是旧值 Hello 和新值 Hel

这是demo

现在这是我的第二个 html

<input id="txt" ></input>
<input type="button" id="btn" />

以及对应的js

$('#txt').val('Hello');
$('#btn').click(function(){
    alert('Old Value '+ document.getElementById('txt').defaultValue);
    alert('New value ' + document.getElementById('txt').value);
});

在这里，如果我删除一些字符并将其设为 Hel 并按下按钮，我得到的输出是 Old Value 和 New value Hel

这是demo

任何人都可以解释为什么两个示例中的 defaultValue 存在差异

Answer 1

因为默认值是由输入字段的初始值设置的...在第二种情况下是空字符串...您正在使用脚本更改该值，该脚本不会更新 defaultValue

defaultValue:

The default value as originally specified in HTML that created this object.

您可以使用.prop()更新 value 后更新 defaultValue 的值

$('#txt').val('Hello').prop('defaultValue', 'Hello');

或

$('#txt').val('Hello').prop('defaultValue', function(){
    return this.value
});

演示:Fiddle