【问题标题】:How to reset an individual input element with JQuery如何使用 JQuery 重置单个输入元素
【发布时间】:2015-11-27 15:59:18
【问题描述】:

如何使用 JQuery 重置单个输入元素(是 JQuery 还是 JavaScript)?

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

【问题讨论】:

  • $('#myinputid').val('');
  • @usandfriends 假设原始值为 ''

标签: jquery html-input


【解决方案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>

【讨论】:

  • 我的意思是,我觉得你的想法很聪明。为什么不将&lt;form&gt; 附加到正文,将输入移到那里,重置表单,然后将输入重新移动到其原始位置?不过,我不知道以原始形式重置输入有多重要。
  • 即使输入已经在一个表单中,也可以临时换行另一个表单。戳这里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;

【讨论】:

【解决方案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);
      });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-05-17
        • 1970-01-01
        • 1970-01-01
        • 2015-05-22
        • 2014-02-18
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多