輸入字段中的默認文本

我不知道這是否有一個特殊的名稱，但有沒有一個很好的簡單方法來設置輸入字段中的默認文本，它會消失在焦點上，並在文本框爲空時重新出現模糊？輸入字段中的默認文本

來源

2011-02-01 oshirowanen

名稱是佔位符。現在它正式成爲HTML（5）規範的一部分，所有現代瀏覽器都支持它作爲內聯HTML。有關解釋，請參閱下面的答案。 – xzyfer 2011-02-01 11:53:23

字是WATERMARK

我鼓勵使用插件，除非你有充足的時間devel的的選擇和測試。在編寫此代碼時，需要注意許多問題和副作用。

當字段包含水印文本時，將該字段驗證爲'空'。從而區分水印文本和輸入的文本。
不提交水印文本。
防止用戶輸入水印文本本身:)
造型水印文本。
等，等....

來源

2011-02-01 11:48:06

我只是想讓你知道4個鏈接中有3個是壞的。 – 2014-01-15 17:09:19

這是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();

來源

2011-02-01 11:47:39 gor

按照建議使用[jquery.watermark]（http://plugins.jquery.com/project/Watermark）插件。 – gor 2011-02-01 11:52:29

對未來的證明和使用數據屬性不是更好嗎？這種方式代碼是未來兼容的，將被驗證爲HTML5，並且具有語義意義。 – xzyfer 2011-02-01 12:09:02

你可以試試這個：使用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(""); 
} 
});

}）;

來源

2011-02-01 11:49:01

該功能被稱爲水印，並能以多種方式來達到的，其中之一是

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

這將電子郵件文本框工作。

來源

2011-02-01 11:50:50

您可以使用新的HTML5佔位符屬性。

編輯：更新使用更多的HTML5/jQuery hotness，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'); 
}):

來源

2011-02-01 11:52:15 xzyfer

你可以使用這個插件（我的合着者）

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

其複製的輸入字段，並把它放在那裏。

它適用於IE，Firefox，Chrome甚至iPhone Safari，它有着名的焦點問題。

這樣您就不必擔心在提交前清除輸入字段。

如果你想HTML5而已，你可以用屬性「佔位符」上輸入字段

來源

2011-07-13 05:50:17 Tanin

這裏是我的做法（使用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>

來源

2012-12-11 11:01:48

輸入字段中的默認文本

回答

相關問題