Question

我正在尝试提出一个简单的jquery输入水印功能。基本上，如果输入字段没有值，则显示其标题。

我已经想出了将输入值作为标题分配所必需的jquery，但它不会在页面上显示，就好像它是一个手工编码到表单中的值。

如何在输入字段中加载页面时显示该值以供用户查看？

$(document).ready(function() {

    $(".wmk").each(function(){
      var value = $(this).val();
      var title = $(this).attr("title");

      if (value == '') {
        value = title;
      }

      $(".result").text(value);
      // You can see I can get something else to display the value, but it does 
      // not display in the actual input field.            
    });

});

Answer 1

您是否考虑使用预烘烤版本而不是自己编写？它并不完全符合您的要求，但它们具有您可能想要的其他功能（例如，行为类似于在您开始输入时自动隐藏占位符的普通占位符）。

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html http://archive.plugins.jquery.com/project/input-placeholder

Answer 2

使用以下代码行。您需要指定input元素，并更新其值。由于您的输入字段有一个名为'.wmk'的类，我使用下面的代码。您可以使用“id”并使用“＃”代替“。”。在http://api.jquery.com/category/selectors/

了解有关选择器的更多信息

$(".wmk").val(value);

更新了jsfiddle http://jsfiddle.net/bhatlx/mQ3sX/9/

更新：因为你在'.wmk'上使用'each'，你可以使用

 $(this).val(value)

Answer 3

我认为你想要的是：

$(document).ready(function() {

    $(".wmk").each(function(){
    var value = $(this).val();
    var title = $(this).attr("title");

    if (value == '') {
        $(this).val(title);
    }

    $(".result").text(value);

    });

});

Answer 4

可能你想要下面这样的东西，

DEMO

$(document).ready(function() {

    $(".wmk").each (function () {
        if (this.value == '') this.value = this.title;
    });

    $(".wmk").focus(
        function () {
            if (this.value == this.title) this.value = '';
        }
    ).blur(
        function () {
            if (this.value == '') this.value = this.title;
        }
    );

}); // end doc ready

使用jQuery将输入TITLE显示为VALUE（包括jsfiddle）

4 个答案: