如何在jQuery中恢复文本字段的默认值？

Question

我有一个包含一些<input type="text"> 字段的表格的页面。我在每个字段旁边都有一个按钮。我允许用户更改输入字段的文本。但是当用户点击输入框旁边的按钮时，对应的输入框的值需要恢复为默认（之前的）值。

我尝试创建一个以索引作为输入字段名称的数组。该数组可以存储默认值，并且可以轻松检索并恢复到其相应的字段。我尝试使用keyup(function() 执行此操作，但我知道每次按下键都会触发。

这是我的 HTML；

<input class="zx" type="text" name="qwer" value="Google" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Yahoo" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Bing" /><button class="cncl">X</button><br />
<input class="zx" type="text" name="qwer" value="Ask" /><button class="cncl">X</button><br />

Here 是小提琴。

如何恢复字段的默认值？

Answer 1

可以使用输入元素的defaultValue属性

$('.cncl').click(function(){
    $(this).prev().val(function(){
        return this.defaultValue;
    })
})

演示：Fiddle

Answer 2

试试这个，使用.attr('value')获取默认值：

$('.cncl').on('click', function () {
    $(this).prev().val($(this).prev().attr('value'));
});

DEMO

Answer 3

我过去做过类似的事情。我将默认值存储在 html-tag 本身的属性中。

<input class="zx" type="text" name="qwer" default-value="Google" value="Google" />

当你想恢复它时你可以执行

$('selector').val($('selector').attr('default-value'));