JSP页面input框的提示信息动态展示小结

JSP页面input框的提示信息小结

需求如下:

在输入表格内容时，输入框内默认展示提示信息

当鼠标点击输入框时，提示信息消失,

输入框失焦后：若用户未输入，则展示提示信息；若用户已输入，则展示已输入的内容

保存后重新进入页面进行编辑时，输入框要默认显示用户输入的内容，若内容被清空再次失去焦点时，输入框继续展示提示信息

 

网络上常出现的参考代码如下

<input type="text" value="提示内容。。。" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style ="#999;"/>
    </div>

笔者参考了这段代码，有如下问题 

onBlur="if(!value){value=defaultValue;this.style.color='#999'}" 

这段本意是如果输入框的内容为空，失去焦点后显示默认的value，也就是前面定义的提示内容

而if(!value）并不生效，应改为 onBlur="if(value=='')

另一个问题是，value="提示内容"给写死了，在编辑页面魏触发任何事件时，应默认显示显示用户输入的内容，而不是提示信息

value=" " 引号里不支持逻辑运算，故加入三元运算符，根据不同情况智能展示是无法做到的。

于是笔者尝试使用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()" />
————————————————
版权声明：本文为CSDN博主「爱吃鱼油」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010081710/article/details/54585035

这样做的问题在于客户使用的IE浏览器不支持οnblur事件，无法触发相关代码。

问题又回到原点，只好继续在input框里做文章了，既然文本框里不能做逻辑判断，那拿到外边去呢？

于是就有了如下代码

<c:if test="${demand.visitDays==null}">
    <input name="demand.visitDays" id="visitDays" type="text"   style="width:100%; color: #999;" value="一国不超过5天，两国不超过8天，三国不超过10天" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(value==''){value=defaultValue;this.style.color='#999'}" />
</c:if>

<c:if test="${demand.visitDays!=null}">
    <input name="demand.visitDays" id="visitDays" type="text"   style="width:100%;" value="${demand.visitDays}" tip = "一国不超过5天，两国不超过8天，三国不超过10天" onFocus="if(value==tip){value='';this.style.color='#000'}" onBlur="if(value==''){value=tip;this.style.color='#999'}"/>
</c:if>

新增页面：默认显示提示信息，鼠标聚焦时清空提示信息，若用户输入内容，失焦后展示用户所输入的内容；若用户没有输入，失焦后继续展示提示信息

编辑页面：默认显示用户在新增页面已输入的内容，聚焦时无操作，继续展示用户输入的内容。若用户聚焦后删除原有内容，失焦后则展示提示信息。

 

总结，老项目配IE就是个坑啊，如果前端用的HTML5，一行代码 placeholder="远离老项目"就能搞定了，哎！