输入框中的默认文本

Question

输入框中的默认文本

javascriptjqueryjquery-ui

6

我不知道这个有没有特别的名字，但是是否有一种简单而好用的方法来设置输入框中的默认文本，在焦点处消失并在模糊时重新出现，如果文本框为空？

- oshirowanen

名称是占位符。现在它已正式成为HTML（5）规范的一部分，因此所有现代浏览器都支持它作为内联HTML。有关说明，请参见我的答案。 - xzyfer

7个回答

4

这个功能被称为水印，可以通过多种方式实现，其中之一是

onfocus="if(this.value=='Enter Email')this.value=''"
onblur="if(this.value=='')this.value='Enter Email'"

这将适用于电子邮件文本框。

- Furqan Hameedi

4

这个词是WATERMARK

我建议使用插件，除非你有大量的时间开发和测试。当编写此代码时，需要注意许多问题和副作用。

验证包含水印文本的字段是否为空。从输入的文本中区分出水印文本。
不提交水印文本。
防止用户键入水印文本本身 :)
为水印文本设计样式。
等等，等等....

- Caspar Kleijne

我只是想告诉你，其中4个链接中有3个已经失效了。 - Code Maverick

2

Here is solution.

$(".defaultText").focus(function(srcc)
{
    if ($(this).val() == $(this)[0].title)
    {
        $(this).removeClass("defaultTextActive");
        $(this).val("");
    }
});

$(".defaultText").blur(function()
{
    if ($(this).val() == "")
    {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }
});

$(".defaultText").blur();

- gor

使用建议的 jquery.watermark 插件。 - gor

使用数据属性来保证代码的兼容性和语义化，这样不是更好吗？这样做可以使代码具有未来兼容性，符合HTML5标准，并且更加语义化。 - xzyfer

2

你可以试着使用title属性来存储默认文本。

$(function(){ 

$(".makedefault").bind("blur",function(){

if($(this).val().length == 0)
{
   $(this).val($(this).attr('title'));
}
});
$(".makedefault").bind("focus",function(){

if($(this).val() == $(this).attr('title'))
{
   $(this).val("");
}
});

});

- The_Butcher

1

你可以使用这个插件（我是共同作者）

https://github.com/tanin47/jquery.default_text

它克隆一个输入字段并将其放置在那里。

它适用于IE，Firefox，Chrome甚至iPhone Safari，后者有着著名的焦点问题。

这样，您就不必担心在提交之前清除输入字段。

或者

如果您只想使用HTML5，则可以在输入字段上使用属性“placeholder”。

- Tanin

0

这是我的方法（使用jQuery）：

<input id="myBox" type="text" />

<script>
  // Input field and default text
  var $element = $('#myBox');
  var defaultText = 'Hello World';

  $element.focus(function(){
    // Focused
    $element.removeClass('defocused').addClass('focused');
    if($element.val() == defaultText)
      $element.val('');
  }).blur(function(){
    // Defocused
    $element.removeClass('focused').addClass('defocused');
    if($element.val() == '')
      $element.val(defaultText);
  });

  // Initialization
  $element.blur();
</script>

- Benny Code

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xzyfer · Accepted Answer

您可以使用新的HTML5占位符属性。编辑：更新以使用更多HTML5 / jQuery的新功能，即HTML5数据存储。

<input type="text" placeholder="type here" data-placeholder-text="type here" />

这将在所有现代浏览器上运行，并在 IE 上优雅地降级。但是，对于 IE，您将需要使用 JavaScript。

$(document).ready(function() {

    var $input = $('#id_of_input_element');
    $input.focus(function() {
        if($(this).val() == $(this).data('placeholder-text')) { 
            $(this).val('') 
        }
    }).blur(function() {
        if($(this).val() == '') {
            $(this).val($(this).data('placeholder-text'));
        }
    }).trigger('blur');
}):