如何在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 />

这是小提琴.

如何将默认值恢复到字段？

Answer 1

试试这个,.attr('value')用来获取默认值:

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

DEMO

Answer 2

您可以使用input元素的defaultValue属性

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

演示:小提琴