如何在单击后清除输入文本

Question

使用jQuery,如何在点击后清除输入文本？默认情况下,该值保留在输入字段中.

例如,我有一个输入文本,值为TEXT.当我执行单击时,我希望输入字段变空.

Answer 1

要在删除默认文本时单击元素:

$('input:text').click(
    function(){
        $(this).val('');
    });

不过,我会建议使用focus():

$('input:text').focus(
    function(){
        $(this).val('');
    });

这也响应键盘事件(例如tab键).此外,您可以placeholder在元素中使用该属性:

<input type="text" placeholder="default text" />

这将清除元素的焦点,并在元素保持为空/用户不输入任何内容时重新出现.

Answer 2

更新:我的字面意思是"点击",这对我来说有点愚蠢.如果您还希望在用户选中输入时执行操作,则可以替换focus以下click所有内容,这似乎很可能.

更新2:我猜你正在寻找占位符; 最后看注释和例子.

原始答案:

你可以这样做:

$("selector_for_the_input").click(function() {
    this.value = '';
});

......但是无论它是什么,这都将清除文本.如果您只想清除它,如果它是特定值:

$("selector_for_the_input").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

例如,如果输入有id,您可以这样做:

$("#theId").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

或者,如果它是一个带有id(例如,"myForm")的表单,并且您希望为每个表单字段执行此操作:

$("#myForm input").click(function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

您也可以通过委派来做到这一点:

$("#myForm").delegate("input", "click", function() {
    if (this.value === "TEXT") {
        this.value = '';
    }
});

这用于delegate挂钩表单上的处理程序,但将其应用于表单上的输入,而不是将处理程序连接到每个单独的输入.

如果你正在尝试做占位符,那么它还有更多的东西,你可能想找到一个好的插件来做它.但这是基础知识:

HTML:

<form id='theForm'>
  <label>Field 1:
    <input type='text' value='provide a value for field 1'>
  </label>
  <br><label>Field 2:
    <input type='text' value='provide a value for field 2'>
  </label>
  <br><label>Field 3:
    <input type='text' value='provide a value for field 3'>
  </label>
</form>

使用jQuery的JavaScript:

jQuery(function($) {

  // Save the initial values of the inputs as placeholder text
  $('#theForm input').attr("data-placeholdertext", function() {
    return this.value;
  });

  // Hook up a handler to delete the placeholder text on focus,
  // and put it back on blur
  $('#theForm')
    .delegate('input', 'focus', function() {
      if (this.value === $(this).attr("data-placeholdertext")) {
        this.value = '';
      }
    })
    .delegate('input', 'blur', function() {
      if (this.value.length == 0) {
        this.value = $(this).attr("data-placeholdertext");
      }
    });

});

实时复制

当然,您也可以使用HTML5中的新placeholder属性,只有在您的代码在不支持它的浏览器上运行时才执行上述操作,在这种情况下,您要反转上面使用的逻辑:

HTML:

<form id='theForm'>
  <label>Field 1:
    <input type='text' placeholder='provide a value for field 1'>
  </label>
  <br><label>Field 2:
    <input type='text' placeholder='provide a value for field 2'>
  </label>
  <br><label>Field 3:
    <input type='text' placeholder='provide a value for field 3'>
  </label>
</form>

使用jQuery的JavaScript:

jQuery(function($) {

  // Is placeholder supported?
  if ('placeholder' in document.createElement('input')) {
    // Yes, no need for us to do it
    display("This browser supports automatic placeholders");
  }
  else {
    // No, do it manually
    display("Manual placeholders");

    // Set the initial values of the inputs as placeholder text
    $('#theForm input').val(function() {
      if (this.value.length == 0) {
        return $(this).attr('placeholder');
      }
    });

    // Hook up a handler to delete the placeholder text on focus,
    // and put it back on blur
    $('#theForm')
      .delegate('input', 'focus', function() {
        if (this.value === $(this).attr("placeholder")) {
          this.value = '';
        }
      })
      .delegate('input', 'blur', function() {
        if (this.value.length == 0) {
          this.value = $(this).attr("placeholder");
        }
      });
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

实时复制

(感谢使用diveintohtml5.ep.io获取placholder功能检测代码.)