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

How to restore default value of text field in jQuery?

本文关键字：文本 字段 默认值 恢复 jQuery      更新时间：2023-09-26

我有一个带有一些<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 />

这里是小提琴

如何恢复字段的默认值?

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

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

演示:小提琴

试试这个，使用.attr('value')来获得默认值:

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

我以前也做过类似的事情。我将默认值存储在html标签本身的一个属性中。

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

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

$('selector').val($('selector').attr('default-value'));
相关文章：