单击时删除input文本的默认值
我有一个input文字：
<input name="Email" type="text" id="Email" value="email@abc.com" /> 我想把一个默认值，如“你的编程问题是什么？具体”。 在StackOverFlow中，当用户点击它时，默认值disapear。
编辑 ：虽然，这个解决scheme的工作原理，我会build议你尝试下面的使用placeholder属性和JavaScript后备的浏览器，但不支持它的MvanGeest的解决scheme 。
如果您正在寻找与MvanGeest的回复中的JQuery后备相当的Mootools， 则下面是一个 。
–
您可能应该使用onfocus和onblur事件来支持通过表单进行select的键盘用户。
这是一个例子：
<input type="text" value="email@abc.com" name="Email" id="Email" onblur="if (this.value == '') {this.value = 'email@abc.com';}" onfocus="if (this.value == 'email@abc.com') {this.value = '';}" />
为了将来的参考，我必须包括HTML5的方式来做到这一点。
<input name="Email" type="text" id="Email" value="email@abc.com" placeholder="What's your programming question ? be specific." />
如果您有HTML5文档types和符合HTML5的浏览器，则可以使用。 但是， 目前许多浏览器都不支持 ，所以至lessInternet Explorer用户将无法看到您的占位符。 但是，请参阅http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/（archive.org 版本 ）以获取解决scheme。 使用它，你将会非常现代和符合标准，同时也为大多数用户提供function。
此外，提供的链接是一个经过充分testing和发展完善的解决scheme，应该可以开箱即用。
我觉得这个比较清爽。 请注意input的“defaultValue”属性的用法：
<script> function onBlur(el) { if (el.value == '') { el.value = el.defaultValue; } } function onFocus(el) { if (el.value == el.defaultValue) { el.value = ''; } } </script> <form> <input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" /> </form>
使用jQuery，你可以这样做：
$("input:text").each(function () { // store default value var v = this.value; $(this).blur(function () { // if input is empty, reset value to default if (this.value.length == 0) this.value = v; }).focus(function () { // when input is focused, clear its contents this.value = ""; }); });
你可以把所有的东西都放到一个自定义的插件中，像这样：
jQuery.fn.hideObtrusiveText = function () { return this.each(function () { var v = this.value; $(this).blur(function () { if (this.value.length == 0) this.value = v; }).focus(function () { this.value = ""; }); }); };
以下是如何使用插件：
$("input:text").hideObtrusiveText();
使用这个代码的好处是：
- 它不显眼，不污染DOM
- 代码重用：它在多个领域工作
- 它自己计算出input的默认值
非jQuery方法：
function hideObtrusiveText(id) { var e = document.getElementById(id); var v = e.value; e.onfocus = function () { e.value = ""; }; e.onblur = function () { if (e.value.length == 0) e.value = v; }; }
在里面input以下内容 标记，只需添加onFocus =“value =''”，以便您的最终代码如下所示：
<input type="email" id="Email" onFocus="value=''">
这使用JavaScript的onFocus（）事件持有人。
只需在input中使用placeholder标记而不是value
我们可以在不使用js的情况下，使用html5的“placeholder”属性（默认文本在用户开始input时消失，而不是在点击时消失）
<input type="email" id="email" placeholder="xyz@abc.com">
看到这个： http : //www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder
<input name="Email" type="text" id="Email" placeholder="enter your question" />
占位符属性指定描述input字段的期望值（例如样本值或期望格式的简短描述）的简短提示。
在用户input一个值之前，短的提示显示在input字段中。
注：占位符属性适用于以下inputtypes：文本，search，url，电话，电子邮件和密码。
我认为这将有所帮助。
这里是非常简单的JavaScript。 这对我来说可以 ：
function sFocus (field) { if(field.value == 'Enter your search') { field.value = ''; } field.className = "darkinput"; } function sBlur (field) { if (field.value == '') { field.value = 'Enter your search'; field.className = "lightinput"; } else { field.className = "darkinput"; } }
为什么去除价值？ 其有用的，但为什么不尝试CSS
input[submit] { font-size: 0 !important; }
值是检查和validation你的PHP很重要
这是一个jQuery解决scheme。 当用户清除input字段时，我总是让默认值重新出现。
<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="email@abc.com" /> <script> $("#Email").blur( function (){ if ($(this).val() == "") $(this).val($(this).prop("defaultValue")); } ).focus( function (){ if ($(this).val() == $(this).prop("defaultValue")) $(this).val(""); } ); </script>
我没有看到像这样的简单答案，所以也许会帮助别人。
var inputText = document.getElementById("inputText"); inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; } inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }
这是一个简单的方法。
#animal表示DOM中的任何button。
#animal-value是被定位的inputID。
$("#animal").on('click', function(){ var userVal = $("#animal-value").val(); // storing that value console.log(userVal); // logging the stored value to the console $("#animal-value").val('') // reseting it to empty });
