將輸入提示添加到HTML表單域

我正在尋找一種將輸入提示添加到我的HTML表單域的好方法 - 與StackOverflow在其所有文本域內使用淺灰色文本作爲提示一樣。將輸入提示添加到HTML表單域

想象一下那裏會有一個jQuery插件，但到目前爲止還沒有找到任何好的東西。任何人？

2011-05-18 Yarin

看到這個問題的答案：Jquery default value in password field

在HTML5中，你可以這樣做：

<input type="text" placeholder="Default Value"/>

這是如果你查看頂部的搜索欄什麼，所以做：

<input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="140" size="28" value="search">

來源

2011-05-18 16:30:31 Neal

如果您的意思是在表單字段中使用淺灰色文本，則可以在近期的瀏覽器中使用placeholder屬性：

<input type="text" placeholder="This text will appear inside the form field until the user focuses it">

我不知道任何包裝的jQuery插件，在瀏覽器中模仿這個功能，不支持placeholder的，但這裏有一個如何自己做jQuery的一個例子：

http://web.enavu.com/design/css/use-html5-placeholder-input-attribute-today-using-jquery/

來源

2011-05-18 16:30:46

您可以使用HTML5或javascript/jquery。

HTML5：

<input type="text" placeholder="The text box" />

的jQuery：

var textbox = $('input:text'); 

// Use external css. This is just for example purposes 
textbox.css({ color: '#bbb' }).val('the text box'); 

textbox.focus(function(){ 
var that = $(this); 

that.removeAttr('style'); 
that.val(''); // Empty text box 

}).blur(function(){ 
var that = $(this); 

that.css({ color: '#bbb' }); // Use external css 
$(this).val('the text box'); // Refill it 

});

來源

2011-05-18 17:03:43 Shaoz

我有同樣的問題，但使用的是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('<div class="prompt_element" ></div>');  //wrap the element with the prompt element 
    _promptfieldClassName = 'prompt_' + $(this)[0].uniqueID; 
    var _promptfield = '<div class="prompt_field ' + _promptfieldClassName + '" >' + $(this).attr('title') + '</div>' //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自動完成功能我只需要添加在$（本）.blur（）;關於更改選項功能的聲明。這確保了在所有其他自動完成事件完成之後觸發模糊事件，以確保檢查該字段是否在需要時重置提示。

$(...).autocomplete({change:function(){ $(this).blur(); }})

來源

2015-02-13 21:12:32

將輸入提示添加到HTML表單域

回答

相關問題