基于JS实现html中placeholder属性提示文字效果示例
本文实例讲述了基于JS实现html中placeholder属性提示文字效果。分享给大家供大家参考,具体如下:
如何通过js实现html的placeholder属性效果呢
我们需要这样做:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS实现placeholder属性效果</title> <script> function bl(){ var a=document.getElementById("inpt"); if(a.value.length<=0){ a.style.color="#999999"; a.value="请输入姓名"; } } function fo(){ var a=document.getElementById("inpt"); if(a.value=="请输入姓名"){ a.style.color="black"; a.value=""; } } </script> </head> <body> <input style="color: #999999;" value="请输入姓名" id="inpt" type="text" onblur="bl()" onfocus="fo()" /> </body> </html>
运行效果如下:
补充:
这里再为大家补充一个jQuery实现的placeholder属性效果示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery实现placeholder属性效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <input style="color: #999999;" data-value="请输入姓名" id="inpt" type="text"/> <script> function placeHolder(event){ var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val(); if(selfDataValue){ event.type == "click" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9")))) }else{ return false; } } $("#inpt").on("click blur",placeHolder); </script> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- js兼容的placeholder属性详解
- js模仿html5 placeholder适应于不支持的浏览器
- javascript 文本框水印/占位符(watermark/placeholder)实现方法
- 让低版本浏览器支持input的placeholder属性(js方法)
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- 使用jQuery快速解决input中placeholder值在ie中无法支持的问题
- IE下支持文本框和密码框placeholder效果的JQuery插件分享
- 基于jQuery的让非HTML5浏览器支持placeholder属性的代码
- jQuery实现的placeholder效果完整实例
- jQuery实现的一个自定义Placeholder属性插件
- jQuery插件EnPlaceholder实现输入框提示文字
赞 (0)