Question

我有一个输入框，访问者可以更改值

<input id="custom_coverage" type="text" value="320" name="custom_coverage">

当他们更改值时，它会通过另一个jQuery脚本进行计算。

如何在输入框旁边添加按钮或链接，以便访问者可以将其恢复为默认值？

Answer 1

将原始值存储在data属性中，例如<input id="custom_coverage" type="text" value="320" data-original-value="320" name="custom_coverage">

然后添加一个再次切换值的按钮：

<a href="#" class="restore">Restore</a>

<script>

  $(document).on("click", ".restore", function(){
    var custom_coverage = $("input#custom_coverage");
    custom_coverage.val(custom_coverage.data("original-value"));

  });

</script>

示例：http://jsfiddle.net/deDdy/

Answer 2

你这样做：

<input type="reset" value="Restore" />

但它会重置所有表单，而不仅仅是一个输入。

Answer 3

如果您的输入位于表单内，则可以使用“重置”类型输入按钮。

<form action="mySubmit">
<input id="custom_coverage" type="text" value="320" name="custom_coverage">
<input type="reset" value="BUTTON NAME HERE">
</form>

或者，如果你知道原始值是什么，你可以做这样的事情

<input type="button" onclick="$('#custom_coverage').val('ORIGINAL VALUE');" value="Reset"/>

Answer 4

您可以使用一个简单的函数将值重置为您想要的任何值。

defaultValue = 320;
resetValue = function() {
   $('#custom_coverage').val(defaultValue)
}

以下是jsFiddle

Answer 5

是的，你可以：

<script type="text/javascript">

$(document).ready(function(){
    var default_value = $('#custom_coverage').val();
    $('#reset_value').click(function(){
        $(this).val(default_value);
        return false;
    });
});

</script>
<input id="custom_coverage" type="text" value="320" name="custom_coverage" id="custom_coverage">
<a href="#" id="reset_value">Reset input</a>

Answer 6

您可以将该值存储在按钮的data属性上，并在点击按钮时将其分配回输入。

var $input = $('#custom_coverage'),
    $reset = $('#reset')
$('#reset').data('default', $input.val() );

$reset.on('click', function() {
   $input.val($(this).data('default')); 
});

<强> Check Fiddle

将按钮重置为输入框的默认值

6 个答案: