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

Issues displaying a dynamically updated HTML input value

本文关键字：问题 输入 HTML 更新 显示 动态      更新时间：2023-09-26

我正在努力获得我需要的行为-如下:

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中的输入值是动态变化的，但是如果用户在表单中输入了一些东西，则显示不再更新。

我很想知道为什么会发生这种情况(即，为什么它在一种情况下工作而不是另一种情况)。还有，如果有更好的方法来解决这个问题。

正如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" />

您编辑的jsname。

更新代码:

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

就我个人而言，我会像每个人指出的那样使用占位符属性。如果您也需要支持旧的浏览器和其他不支持占位符属性的浏览器，请使用我编写的这段代码:

$('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调用只是为了向您展示在哪里放置代码来模仿灰色文本，就像现代浏览器所做的那样。

试试这个代码

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"/>

相关文章：