Show placeholder instead of the default value in html form

问题:

A text field in html form have a default value, but I would like to show the placeholder instead of the default value. any ideas?

回答1:

From what you said here it sounds like you actually want to listen for the focus and blur events and just clear the contents of the <input> with some kind of cache to restore it if nothing gets typed.

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

Then in script

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

回答2:

Provided you are only concerned with browsers that support HTML5, the following is an option:

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

回答3:

On one hand, it is doable; on the other hand, I'm not sure why you should.

$('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); });

回答4:

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

转载请标明出处:Show placeholder instead of the default value in html form

文章来源: Show placeholder instead of the default value in html form