向 HTML 表单字段添加输入提示答案

【问题标题】：Adding input prompts to HTML form fields向 HTML 表单字段添加输入提示
【发布时间】：2011-08-28 05:21:57
【问题描述】：

我正在寻找一种向我的 HTML 表单字段添加输入提示的好方法——就像 StackOverflow 在其所有文本字段中使用浅灰色文本作为提示一样。

认为那里会有一个 jQuery 插件，但到目前为止还没有发现任何好的东西。有人吗？

【问题讨论】：

【解决方案1】：

查看此问题的答案：Jquery default value in password field

在 html5 中你可以这样做：

<input type="text" placeholder="Default Value"/>

如果您查看顶部的搜索栏，这就是 SO 所做的：

<input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="140" size="28" value="search">

【讨论】：

【解决方案2】：

如果您的意思是在表单字段中使用浅灰色文本，您可以在最近的浏览器中使用placeholder 属性：

<input type="text" placeholder="This text will appear inside the form field until the user focuses it">

我不知道在不支持placeholder的浏览器中有任何封装的jQuery插件模仿这个功能，但这里有一个如何在jQuery中自己做的例子：

http://web.enavu.com/design/css/use-html5-placeholder-input-attribute-today-using-jquery/

【讨论】：

【解决方案3】：

您可以使用 HTML5 或 javascript/jquery。

HTML5：

<input type="text" placeholder="The text box" />

jquery:

var textbox = $('input:text');

// Use external css. This is just for example purposes
textbox.css({ color: '#bbb' }).val('the text box');

textbox.focus(function(){
 var that = $(this);

 that.removeAttr('style');
 that.val(''); // Empty text box

}).blur(function(){
 var that = $(this);

 that.css({ color: '#bbb' });  // Use external css
 $(this).val('the text box'); // Refill it

});

【讨论】：

【解决方案4】：

我遇到了同样的问题，但使用 IE 8 不允许我选择 HTML 5 我使用了受 Kyle Schaeffer 启发的以下代码。

  $.fn.fieldPrompt = function () {
/*Add the two CSS elements to the application css file.  They control the wrapping element and the prompt element
.prompt_element {display:inline-block; position:relative; }
.prompt_element .prompt_field {display:inline-block; color:#888; font-style:italic; position:absolute; left:5px; top:2px; }*/

var $this = $(this);
$('input[type=text][title],input[type=password][title],textarea[title]', $this).each(function (i) {
  if ($(this).parent().hasClass('prompt_element') == false) { //if prompt already exists then skip
    $(this).wrap('<div class="prompt_element" ></div>');      //wrap the element with the prompt element
    _promptfieldClassName = 'prompt_' + $(this)[0].uniqueID;
    var _promptfield = '<div class="prompt_field ' + _promptfieldClassName + '" >' + $(this).attr('title') + '</div>'    //Create the prompt field
    $(this).before(_promptfield)                              // Add the prompt field to the Prompt element.  The  
    if ($.trim($(this).val()) != '') {                                //Check if the field has a value
      $(this).prev().hide();                                  //Hide the prompt if field has a value
    };
    $('.prompt_field').focus(function () {                    //If the prompt field get the focus - move to the next field which should be the input
      $(this).next().focus();
    });
    $(this).on('keypress paste', function () {                //If field has keypress or paste event was triggered
      $(this).prev().hide();                                  //hide the prompt field
    });
    $(this).blur(function () {                                //If leaving the field element 
      if ($.trim($(this).val()) == '') {                      //Check if the value is empty
        $(this).prev().show();                                //Show the prompt
      }
      else {
        $(this).prev().hide();                                //Hide the prompt. This can be initiated by other events if they fill the field.
      }
    });
  };
});
return $(this);

}

当使用 Jquery 自动完成功能时，我只需要添加 $(this).blur();关于更改选项功能的声明。这确保了在所有其他自动完成事件完成后触发模糊事件，以确保在需要时对字段进行检查以重置提示。

$(...).autocomplete({change:function(){ $(this).blur(); }})

【讨论】：