清除输入字段后丢失输入提示......有什么解决方法吗？答案

【问题标题】：Losing input hints after clearing inout fields... any work around?清除输入字段后丢失输入提示......有什么解决方法吗？
【发布时间】：2012-04-14 02:22:55
【问题描述】：

我有两个脚本用于清除我的表单和使用输入提示。执行 clear 函数后，输入提示没有返回。

function clear_form_elements(ele) {

$(ele).find(':input').each(function() {
switch(this.type) {
    case 'password':
    case 'select-multiple':
    case 'select-one':
    case 'text':
    case 'textarea':
        $(this).val('');
        $("  .bx4a").removeAttr("style");
        $("  .bxTXTa").removeAttr("style");
        $("  .bxTXTa2").removeAttr("style");
        $("  .bx4a2").removeAttr("style");
        $("  .bx").removeAttr("style");
        $("  .ts").removeAttr("style");
        $("  .button-toggle-on").removeAttr("style");
        $("  .gnM").removeAttr("style");
        $("  .gnF").removeAttr("style");
        break;
    case 'checkbox':
    case 'radio':
        this.checked = false;
   }
  });

 }






 // jQuery Input Hints plugin
 // Copyright (c) 2009 Rob Volk
 // http://www.robvolk.com

jQuery.fn.inputHints=function() {
// hides the input display text stored in the title on focus
// and sets it on blur if the user hasn't changed it.

// show the display text
$(this).each(function(i) {
    $(this).val($(this).attr('title'))
        .addClass('hint');
});

// hook up the blur & focus
return $(this).focus(function() {
    if ($(this).val() == $(this).attr('title'))
        $(this).val('')
            .removeClass('hint');
}).blur(function() {
    if ($(this).val() == '')
        $(this).val($(this).attr('title'))
            .addClass('hint');
});
};

$(document).ready(function() {$('input[title],textarea[title]').inputHints();});

【问题讨论】：

标签： javascript jquery input hints

【解决方案1】：

提示文本的策略非常简单：将输入的默认值设置为您想要的提示文本，然后在获得焦点时将值设置为''。然后onblur，如果值还是''，把值设置为默认值。例如

<label for="userName">Name:<input name="userName" id="userName"
 value="Your full name&hellip;" class="hint"></label>

<script>
function hintFocus() {
  if (this.value == this.defaultValue) this.value = '';
}
function hintBlur(el) {
  if (this.value == '') this.value = this.defaultValue;
}

// Add the listeners
var el = document.getElementById('userName');
el.onfocus = hintFocus;
el.onblur = hintBlur;
</script>

为表单使用标准的重置按钮并为其提供一个侦听器，以便在重置表单时添加提示类以输入类型文本和文本区域（视情况而定）。

【讨论】：

【解决方案2】：

我认为 RobG 的答案有一个错误，如果用户输入的文本与提示完全相同（您的全名...），然后单击某处并单击输入，那么用户输入的内容就会消失。

【讨论】：