JS input默认值点击消失

最新推荐文章于 2022-05-11 09:02:48 发布

转载最新推荐文章于 2022-05-11 09:02:48 发布 · 1.1k 阅读

asp 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过JavaScript实现输入框的样式变化和焦点切换功能，包括输入时颜色的变化及焦点转移逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function addLoadEvent(func){
	 var oldonload = window.onload;
	 if(typeof window.onload!= 'function' ){
	   window.onload = func;
	 }
	 else{
	  window.onload = function(){
	  oldonload();
	  func();
	  }
	 }
}
var inputtext = function(){
	 var inputs = document.getElementsByTagName('INPUT');
	 for(var i=0; i<inputs.length; i++){
		  var str = "gray_input";
		  if(str.indexOf(inputs[i].className)==-1) continue;
		  var element = inputs[i];
		  element.onfocus = function() {
				 if (this.value == this.defaultValue) {
					this.value = "";
				 this.className = "gray_input2";
				}
			 }
			   element.onblur = function() {
			   if (this.value == "") {
				  this.value = this.defaultValue;
			 this.className = "gray_input";
				  }
				}
	 }
}


addLoadEvent(inputtext);
</script>
<style>
.gray_input{color:#878787;}
.gray_input2{color:#00000;}
</style>
</head>


<body>
<input name="text2" type="text" id="main_search3" class="gray_input" value="123456"/>


</body>
</html>