html 表单请填写此字段,将输入提示添加到HTML表单字段中

我遇到了同样的问题，但是使用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(\'

_promptfieldClassName = \'prompt_\' + $(this)[0].uniqueID;

var _promptfield = \'

\' + $(this).attr(\'title\') + \'

\' //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(); }})