jQuery 如何删除焦点输入的默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3806227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove default value of input on focus
提问by user342391
I have an input box that has default value text assigned to it. How can I remove this text when the user focuses on the field::
我有一个分配了默认值文本的输入框。当用户专注于该字段时，如何删除此文本::
CoDE
代码
<input type="text" name="kp1_description" value="Enter Keypress Description">
回答by RobertPitt
$(document).ready(function(){
var Input = $('input[name=kp1_description]');
var default_value = Input.val();
Input.focus(function() {
if(Input.val() == default_value) Input.val("");
}).blur(function(){
if(Input.val().length == 0) Input.val(default_value);
});
})?
That should do it.
那应该这样做。
Updated, Forgot that focus does not have a 2nd parameter for the focus-out event because there is none, it has to be chained with blur:
更新，忘记焦点没有焦点事件的第二个参数，因为没有，它必须与模糊链接：
you should also think about creating your own function for this such as:
您还应该考虑为此创建自己的函数，例如：
$.fn.ToggleInputValue = function(){
return $(this).each(function(){
var Input = $(this);
var default_value = Input.val();
Input.focus(function() {
if(Input.val() == default_value) Input.val("");
}).blur(function(){
if(Input.val().length == 0) Input.val(default_value);
});
});
}
Then use like so
然后像这样使用
$(document).ready(function(){
$('input').ToggleInputValue();
})?
回答by clifgriffin
Don't do it this way. Use a jQuery watermark script: http://code.google.com/p/jquery-watermark/
不要这样做。使用 jQuery 水印脚本：http: //code.google.com/p/jquery-watermark/
$("input[name='kp1_description']").watermark("Enter Keypress Description");
$("input[name='kp1_description']").watermark("Enter Keypress Description");
There are a lot of things you have to account for if you do it manually. For instance, what happens when the text box loses focus? If there's no value, you'd want to readd your helper text. If there is, you'd want to honor those changes.
如果您手动执行，则必须考虑很多事情。例如，当文本框失去焦点时会发生什么？如果没有价值，您需要阅读帮助文本。如果有，您会希望尊重这些更改。
Just easier to let other people do the heavy lifting :)
让其他人做繁重的工作更容易:)
回答by pera
With HTML5 you could do it without Javascript: just use placeholderinstead of value.
I think it's a nice addition, but of course you need to check the browser compatibility first.
有了HTML5，你能做到这一点不使用JavaScript：只使用placeholder代替value。我认为这是一个很好的补充，但当然你需要先检查浏览器的兼容性。
回答by kkk
<input type="text" id="anything" placeholder="enter keypress description">
i think this will help
我认为这会有所帮助
回答by bruno
$('input, textarea').each(function () {
var Input = $(this);
var default_value = Input.val();
Input.focus(function() {
if(Input.val() == default_value) Input.val("");
}).blur(function(){
if(Input.val().length == 0) Input.val(default_value);
});
});
回答by Abram
The Super Duper Short Version
Super Duper 短版
$('#input_id').focus(function() {
$(this).val("");
});
回答by Bennj
var defaultForInput = "abc";
var defaultForInput = "abc";
<input id="myTextInput" type="text" placeholder=defaultForInput />
<input id="myTextInput" type="text" placeholder=defaultForInput />
When submitting your form, check if the input(id="myTextInput") value is the 'empty-string', if so substitute it with (defaultForInput).
提交表单时，检查 input(id="myTextInput") 值是否为“空字符串”，如果是，则将其替换为 (defaultForInput)。
回答by ceving
Plain JavaScript:
纯 JavaScript：
(function () {
let input = document.querySelector ("input[name='kp1_description']");
input.onfocus = function () {
this.placeholder = this.value;
this.value = '';
};
})();
This keeps the value in the placeholder instead of removing it completely. If you do not like this, remove the placeholder line.
这会将值保留在占位符中，而不是完全删除它。如果您不喜欢这样，请删除占位符行。
回答by Dhaval
HTML:
HTML：
<form method="post">
<input type="text" id="customer" value="Username"/>
<input type="Submit" value="Login" class="rc" />
</form>
Javascript code:
Javascript代码：
<script>
$('#customer').on({
focus:function(){
if(this.value == 'Username') this.value = '';
},
blur:function(){
if(this.value == '') this.value = 'Username';
}
})
</script>
That's all, I hope it'll help.
就这些，希望能帮到你。
