显示动态更新的 HTML 输入值的问题

Question

我正在努力获得所需的行为 - 如下：

HTML 表单通过 jQuery 预先填充了一个值。当用户关注输入字段时，我希望表单清除。在表单模糊时，表单应使用现有值重新填充表单。

我有一个解决方案可以清除并重新填充表单，但只要输入任何内容就会失败。

这是我目前所拥有的：

var x = "Default";

$(function () {

    $("input").attr({
        "value": x
    });

    $("input").focus(function () {
        $("input").attr({
            "value": ""
        });
    });

    $("input").blur(function () {
        $("input").attr({
            "value": x
        });
    });

});

https://jsfiddle.net/thepeted/p74kfdt8/6/

如果我查看开发人员工具，我可以看到输入值在 DOM 中动态变化，但如果用户在表单中输入了某些内容，则显示不再更新。

我很想了解为什么会发生这种情况（即，为什么它在一种情况下有效，而在另一种情况下无效）。另外，如果有更好的方法来解决这个问题。

Answer 1

正如 Stijn 所指出的，最佳做法是使用占位符属性。

但是，如果您确实想为此使用函数。如果该值是默认值，我会检查焦点。如果是，则清空输入，如果不是，则不执行任何操作。

在模糊时，如果值为空，您也只想放回默认值...所以也要检查一下。

var x = "Default";

$(function() {
  $('input[type=text]').val(x);

  $('input[type=text]').on('focus', function() {
    var elem = $(this);
    if (elem.val() == x)
      elem.val('');
  }).on("blur", function() {
    var elem = $(this);
    if (elem.val() == '')
      elem.val(x);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Answer 2

就个人而言，我会使用placeholder attribute，正如每个人都指出的那样。如果您也需要支持旧版浏览器和其他一些不支持占位符属性的浏览器，请使用我制作的这个 sn-p：

$('input[placeholder]').each(function(){
    var $this = $(this);
    $this.val($this.attr('placeholder')).css('color','888888');
    $this.focus(function(){
        if($(this).val() == $(this).attr('placeholder'))
            $(this).val('').css('color','');
    });
    $this.blur(function(){
        if($(this).val() == '')
            $(this).val($(this).attr('placeholder')).css('color','888888');
    });
});

此脚本将查找所有具有占位符属性的输入，将其值赋予输入，并添加正确的事件。我留下 css 调用只是为了向您展示在哪里放置代码以模仿现代浏览器所做的灰色文本。

Answer 3

您编辑的jsfiddle。

更新代码：

 $("input").blur(function () {
    $("input").val(x);

});

Answer 4

试试这个代码

var x = "Default";

$(function () {

    $("input").val(x);

    $("input").focus(function () {
        $("input").val("");
    });

    $("input").blur(function () {
        $("input").val(x);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text"/>