以html格式顯示佔位符而不是默認值

html表單中的文本字段的默認值爲，但我想顯示佔位符而不是默認值。有什麼想法？以html格式顯示佔位符而不是默認值

2013-07-23 Peter

佔位符（無論是HTML5版本或腳本擴展）是可見的，當輸入控制*無*值。 –

字段將始終有一個值，在創建文本字段時指定一個值 - 它是一個編輯表單。 – Peter

從你說的話here這聽起來像你真的想監聽重點和模糊事件，只是清除<input>的內容以某種緩存來恢復它，如果沒有獲取類型。

<input id="foo" type="text" value="" data-value="" />

然後，在腳本

var foo = document.getElementById('foo'); 
foo.addEventListener('focus', function() { 
    this.setAttribute('data-value', this.value); 
    this.value = ''; 
}); 
foo.addEventListener('blur', function() { 
    if (this.value === '') 
     this.value = this.getAttribute('data-value'); 
});

DEMO

來源

2013-07-23 02:48:01

只要你只關心與支持HTML5的瀏覽器，下面是一個選項：

<input type="text" name="myText" placeholder="My Placeholder">

來源

2013-07-23 02:00:16 marteljn

如果你關注的是舊版瀏覽器，網頁上有一些關於polyfills的好建議[here]（http://html5please.com/#placeholder）和[here]（https://github.com/Modernizr/Modernizr /維基/ HTML5的跨瀏覽器Polyfills＃web的表單 - 輸入佔位符）。這些將在舊版瀏覽器中添加支持，對標記進行零/最小更改。 – carpeliam

一方面，它是可行的;另一方面，我不知道爲什麼你應該。

$('input[type="text"]').each(function (i, o) { 
    var inputBox = $(o), 
     swapInValue = function() { 
      inputBox.val(inputBox.data('val')); 
     }, 
     swapOutValue = function() { 
      inputBox.data('val', inputBox.val()).val(''); 
     }; 
    inputBox.blur(swapOutValue).focus(swapInValue); 
});

來源

2013-07-23 02:06:43 Brian

這樣做，因爲我喜歡用佔位符用戶可以開始輸入新值的事實。而不是先選擇並刪除先前的值。 Sry我就是這樣的強迫症！讓我試試你的代碼.. – Peter

是的，使用佔位符，用戶可以開始輸入新的值。但是，即使文本框已經有值，您也要求佔位符被強制顯示。 – Brian

是的，因此我使'佔位符'等於'值' – Peter

<input type="text" name="foo" placeholder="Foo Name"/> 
<input type="hidden" name="foo" value="foo"/>

來源

2017-11-02 06:23:47

以html格式顯示佔位符而不是默認值

回答

相關問題