javascript 如何更改输入值 onfocus 和 onblur（无 jquery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13224643/
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 change input value onfocus and onblur (no jquery)
提问by ModernDesigner
I wrote some code, kind of like an alternative for HTML5 placeholder using JavaScript, but it's not working. As far as I can figure (with my mediocre knowledge of js), everything should work, but it's not. Please help!!! Here's my code:
我写了一些代码，有点像使用 JavaScript 替代 HTML5 占位符，但它不起作用。据我所知（以我对 js 的平庸知识），一切都应该有效，但事实并非如此。请帮忙！！！这是我的代码：
JavaScript:
JavaScript：
(function(){
var field = document.getElementById('placeholder');
var placeholdertext = "Search box"; // << change this to whatever you want the placeholder text to be
field.setAttribute("onblur", "if(value=='') { value = '" + placeholdertext + "'")
field.setAttribute("onfocus", "if(value=='" + placeholdertext + "') { value = '' }")
})();
HTML
HTML
<input type="search" value="Search box" id="placeholder">
Edit:
编辑：
I don't want to use jQuery or inline-html-coding, please. Thanks for any help, guys!!!
我不想使用 jQuery 或 inline-html-coding，拜托了。感谢您的帮助，伙计们！！！
采纳答案by raina77ow
Replace valuewith this.valuein your code (as you need to check the value of the element that triggers an event, and not some global variable) and it will work.
更换value用this.value在你的代码（如您需要检查触发事件的元素的值，而不是一些全局变量），它会工作。
As a sidenote, perhaps I'd prefer still using placeholderattribute here, providing a JS shim only for the browsers that don't support it. This would simplify the javascript code part too, as you wouldn't have to use some variable just to store some DOM-related data:
作为旁注，也许我更喜欢placeholder在这里仍然使用属性，只为不支持它的浏览器提供一个 JS 垫片。这也将简化 javascript 代码部分，因为您不必使用某些变量来存储一些与 DOM 相关的数据：
field.onblur = function() {
if (this.value === '') {
this.value = this.getAttribute('placeholder');
}
};
field.onfocus = function() {
if (this.value === this.getAttribute('placeholder') ) {
this.value = '';
}
};
... and in fact I'd prefer using addEventListener/attachEventhere instead of onblur/onfocus, as described in this answer.
......事实上，我更喜欢addEventListener/attachEvent在这里使用而不是onblur/onfocus，如本答案所述。
回答by kamatchikumar-India
<input type="text" value="Enter The User Name" onblur="if(this.value == '') { this.style.color='#f00'; this.value='Enter The User Name'}" onfocus="if (this.value == 'Enter The User Name') {this.style.color='#000'; this.value=''}" />
Try This without Jquery
在没有 Jquery 的情况下试试这个
回答by Bart
Without jQuery:
没有 jQuery：
field.onblur = function() {
if (field.value == '') {
field.value = placeholdertext;
}
};
field.onfocus= function() {
if (field.value == placeholdertext ) {
field.value = '';
}
};
回答by Justin Case
I haven't tested this but if i'm understanding your question this should work. If it works don't forget to hit the check mark.
我还没有测试过这个，但如果我理解你的问题，这应该可行。如果它有效，请不要忘记点击复选标记。
var field = document.getElementById('placeholder');
var placeholdertext = "Search box";
field.bind('onblur', function() {
if (field.text() === '') {
field.text(placeholdertext);
}
});
field.bind('onfocus', function() {
if (field.text() === '') {
field.text(placeholdertext);
}
});
