如何使用 JQuery 重置单个输入元素

Posted 2023-02-22

【中文标题】如何使用 JQuery 重置单个输入元素

【英文标题】：How to reset an individual input element with JQuery

【发布时间】：2015-11-27 15:59:18

【问题描述】：

（是 JQuery 还是 javascript）？

How to reset a form using jQuery with .reset() method 展示了如何重置整个表单，但我想重置单个元素，而不是整个表单。

【问题讨论】：

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

@usandfriends 假设原始值为 ''。

【参考方案1】：

您可能需要为此使用 hack。

使用.wrap() 将所需的输入暂时包装在一个表单中。

$('#input1,#input2').val('testUpdated');
$('#input1').wrap('<form/>');
$('#input1').closest('form')[0].reset();
$('#input1').unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input id="input1" value="test"/>
    <input id="input2" value="test"/>
</form>

【讨论】：

我的意思是，我觉得你的想法很聪明。为什么不将<form> 附加到正文，将输入移到那里，重置表单，然后将输入重新移动到其原始位置？不过，我不知道以原始形式重置输入有多重要。

即使输入已经在一个表单中，也可以临时换行另一个表单。戳这里jsfiddle.net/m7e0277t/1

【参考方案2】：

FIDDLE

尝试使用$(this).val(defaultVal);

('#maincontainer').find('textarea,input[type=text]').each(function () 
        var defaultVal = $(this).data('default');
        $(this).val(defaultVal);
    );

如果您想清除特定输入，请更改 ID 这里我只是展示如何清除输入和文本区域

【讨论】：

当我测试它时，$(this).data('default') 返回未定义。这是期望的行为吗？

你应该把默认设置为空白我不知道你需要那种信息问题只是说重置输入

如果不明确定义data-default，这将返回undefined，因此不太实用

我已经阅读了好几次这个问题，但没有提到他需要得到他想要的值就是重置输入，这个例子就是这样做的，但还是谢谢

【参考方案3】：

您可以使用 defaultValue 属性访问输入元素的原始值。

例如你可以这样做：

var myInput = document.getElementById("myInput");

myInput.value = myInput.defaultValue;

【讨论】：

这似乎是一个更好的答案。为此jsfiddle.net/m7e0277t/2

做了一个小提琴

【参考方案4】：

如果输入元素中已经设置了值，则可以引用回

 $('#resetName').click(function () 
     $('#name').val($('#name').attr('value'));
 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="TEST" id="name"></input>
    <input value="99" id="age"></input>
    <input value="1 Apr 2000" id="DOB"></input>
    
    <button id="resetName" value="Reset Name">Reset Name</button>

【参考方案5】：

使用 jQuery 重置单个输入字段：

$('#myField').val($('#myField').prop("defaultValue"));

【参考方案6】：

很简单

$('#escape').on('click', function(e)
                        $('#field').val($('#field').defaultValue);
);