input输入框添加提示文字

最新推荐文章于 2021-06-03 06:36:43 发布

爱吃鱼油

最新推荐文章于 2021-06-03 06:36:43 发布

阅读量2.2w

点赞数 2

分类专栏： js 文章标签： js input

本文链接：https://blog.csdn.net/u010081710/article/details/54585035

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<input> placeholder 属性

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

</body>
</html>

第二种 js代码方式

<script type="text/javascript">
   var inputAdvice="请输入合同编号或客户名称";
   $(function(){
		$("#search").val(inputAdvice);
		document.getElementById('search').style.color='#C0C0C0';
	})
	/**查询输入框点击**/
	function clickMessage (){
		var searchVal=$("#search").val();
		if(inputAdvice==searchVal){
		$("#search").val("");
		document.getElementById('search').style.color='#000000';
		}
	}
	/**查询输入框失去焦点**/
	function blurMessage(){
		var searchVal=$("#search").val();
		if(""!=searchVal){
		document.getElementById('search').style.color='#000000';
		}else{
		$("#search").val(inputAdvice);
		document.getElementById('search').style.color='#C0C0C0'; 
		}
	}
</script>

<input type="text" id="search" οnclick="clickMessage()" οnblur="blurMessage()" />

效果

CSS颜色