Question

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

想到那里会有一个jQuery插件，但到目前为止还没有找到任何好的东西。任何人

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

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

Answer 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

});

Answer 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(); }})

将输入提示添加到HTML表单字段

4 个答案: