是否可以使用CSS更改輸入值？

當用戶點擊它時，我可以使用CSS更改輸入字段值嗎？是否可以使用CSS更改輸入值？

像：

<input type=text name=username> 
<input type=password name=password>

所以，當用戶點擊進入該領域，該文本將消失，他就可以寫的東西。

我曾嘗試：

input[value="Input desired username here"] { 
styles... 
}

任何線索？

來源

2013-03-04 Darkeden

順便說一句，把你的html屬性放在雙引號內。 'type = text'必須變成'type =「text」'等等...... – 2013-03-04 22:33:28

[用css更改文本輸入值的可能的重複項]（http://stackoverflow.com/questions/7672521/change-a -text-inputs-value-with-css） – kittykittybangbang 2015-06-15 17:22:21

沒有必要爲此使用css。您可以使用佔位符屬性爲您輸入的標籤，它會顯示在輸入框的默認值：

<input type="text" name="username" placeholder="Username" />

請考慮placeholder屬性不是所有的瀏覽器都支持，如果你想讓它跨瀏覽器，你可以編寫JavaScript代碼放到你的輸入框中的默認值或使用這個簡單而快速修復：

<input type="text" name="username" onFocus="if(this.value=='Username') this.value='';" onBlur="if(this.value=='') this.value='Username';" value="Username" />

來源

2013-03-04 22:30:06

Uhhh haaa !!你很酷！非常感謝！ – Darkeden 2013-03-04 22:32:09

搜索互聯網=浪費一些時間/在stackoverflow上發佈問題=浪費幾分鐘/得到確切的答案= PRICELESS！ :) – Darkeden 2013-03-04 22:33:06

歡迎您。您可以將答案標記爲已接受！ – 2013-03-04 22:34:01

這就是所謂的佔位符。現代瀏覽器將允許您使用像這樣的佔位符屬性：

<input type="text" name="username" placeholder="Input desired username here" />

它會按您的意願顯示。然後，您需要使用Modernizr來將該功能移回舊版瀏覽器。類似這樣的JavaScript有助於：

$(document).ready(function() { 
    if(!Modernizr.input.placeholder) { 
    $('[placeholder]').focus(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
     input.removeClass('placeholder'); 
     } 
    }).blur(function() { 
     var input = $(this); 
     if (input.val() == '' || input.val() == input.attr('placeholder')) { 
     input.addClass('placeholder'); 
     input.val(input.attr('placeholder')); 
    }).blur(); 
    $('[placeholder]').parents('form').submit(function() { 
     $(this).find('[placeholder]').each(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
      input.val(''); 
     } 
     }) 
    }); 
    } 
})

來源

2013-03-04 22:38:46 TheTodd

是否可以使用CSS更改輸入值？

回答

相關問題