浅谈JavaScript实现文本框的placeholder

来源：互联网发布：分级诊疗知乎编辑：程序博客网时间：2024/06/06 01:12

代码：

<!doctype html>  <html>      <head>        </head>      <body>  <input id="input" type="text" value="请输入关键词">     </body>  <script>window.onload = function() {var defaultValue = "请输入关键词";var input = document.getElementById("input");input.style.color = "grey";input.onfocus = function() {if (this.value == defaultValue) {setCursorPosition(this, 0);}};input.onkeypress = function(e) {e = e || window.event;var key = e.charCode || e.keyCode || e.which;if (this.value == defaultValue) {this.value = "";this.style.color = "black";}if (this.value.length == 1 && key == 8) {this.value = defaultValue;this.style.color = "grey";setCursorPosition(this, 0);}};};function setCursorPosition(elem, index) { if (elem.setSelectionRange) {elem.focus();elem.setSelectionRange(index, index);}else if (elem.createTextRange) {var range = elem.createTextRange();range.collapse(true);range.moveEnd('character', index);range.moveStart('character', index);range.select();}} </script></html>

1 0