如何删除焦点输入的默认值答案

【问题标题】：How to remove default value of input on focus如何删除焦点输入的默认值
【发布时间】：2011-04-17 21:36:06
【问题描述】：

我有一个分配有默认值文本的输入框。当用户关注该字段时如何删除此文本::

代码

<input type="text" name="kp1_description" value="Enter Keypress Description">

【问题讨论】：

这不是答案，但将来会是dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
Delete default value of an input text on click的可能重复

标签： jquery input default onfocus

【解决方案1】：

不要这样做。使用 jQuery 水印脚本： http://code.google.com/p/jquery-watermark/

$("input[name='kp1_description']").watermark("Enter Keypress Description");

如果您手动操作，您必须考虑很多事情。例如，当文本框失去焦点时会发生什么？如果没有价值，你会想要阅读你的帮助文本。如果有，你会想要尊重这些变化。

让其他人做繁重的工作更容易:)

【讨论】：

但是使用整个库来完成一项简单的任务并不是最好的主意。
没错，我只是认为这个轮子不需要重新发明。您必须考虑很多场景，使用该库可以大大简化这些场景。他用 jQuery 标记了他的问题，因此使用 jQuery 插件可能是完成这项任务的最实用的方法。
+1 用于代码重用。有些问题很难，应该由库来解决，而不是由地球上的每个代码猴子糟糕地重新实现。当涉及到 javascript 时，人们对此尤其不满意。
这很有趣，因为它可能看起来微不足道，但实际上有很多事情要考虑......

【解决方案2】：

$(document).ready(function(){
    var Input = $('input[name=kp1_description]');
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
})

应该可以的。

更新了，忘记焦点没有焦点事件的第二个参数，因为没有，它必须与模糊链接：

http://jsfiddle.net/hDCsZ/

您还应该考虑为此创建自己的函数，例如：

$.fn.ToggleInputValue = function(){
    return $(this).each(function(){
        var Input = $(this);
        var default_value = Input.val();

        Input.focus(function() {
           if(Input.val() == default_value) Input.val("");
        }).blur(function(){
            if(Input.val().length == 0) Input.val(default_value);
        });
    });
}

然后像这样使用

$(document).ready(function(){
    $('input').ToggleInputValue();
})

【讨论】：

又更新了，抱歉我半睡半醒:)

【解决方案3】：

使用 HTML5，您可以不使用 Javascript：只需使用 placeholder 而不是 value。我认为这是一个很好的补充，但你当然需要先检查浏览器的兼容性。

【讨论】：

【解决方案4】：

HTML：

<form method="post">
  <input type="text" id="customer" value="Username"/>      
  <input type="Submit" value="Login" class="rc" />
</form>

Javascript 代码：

<script>
$('#customer').on({
    focus:function(){                   
      if(this.value == 'Username') this.value = '';
    },
    blur:function(){
      if(this.value == '') this.value = 'Username';
    }
})
</script>

就是这样，我希望它会有所帮助。

【讨论】：

【解决方案5】：

var defaultForInput = "abc";

<input id="myTextInput" type="text" placeholder=defaultForInput />

提交表单时，检查 input(id="myTextInput") 值是否为“空字符串”，如果是，则将其替换为 (defaultForInput)。

【讨论】：

【解决方案6】：

$('input, textarea').each(function () {
    var Input = $(this);
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
});

【讨论】：

【解决方案7】：

超级骗子短版

$('#input_id').focus(function() {
    $(this).val("");
});

【讨论】：

【解决方案8】：

<input type="text" id="anything" placeholder="enter keypress description">

我认为这会有所帮助

【讨论】：

【解决方案9】：

纯 JavaScript：

(function () {
  let input = document.querySelector ("input[name='kp1_description']");
  input.onfocus = function () {
    this.placeholder = this.value;
    this.value = '';
  };
})();

这会将值保留在占位符中，而不是完全删除它。如果您不喜欢这样，请删除占位符行。

【讨论】：