JS实现输入框内灰色文字提示
程序员文章站
2022-03-18 23:38:59
...
这次给大家带来JS实现输入框内灰色文字提示,JS实现输入框内灰色文字提示的注意事项有哪些,下面就是实战案例,一起来看一下。
如何通过js实现html的placeholder属性效果呢
我们需要这样做:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>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>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>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是JS实现输入框内灰色文字提示的详细内容,更多请关注其它相关文章!
上一篇: 开源的数据可视化JavaScript图表库:ECharts
下一篇: CSS3 动画
推荐阅读
-
html5配合css3实现带提示文字的输入框(摆脱js)
-
html输入框提示文字如何修改颜色(文本框内的提示文字)
-
html输入框提示文字如何修改颜色(文本框内的提示文字)
-
基于JS实现html中placeholder属性提示文字效果示例
-
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
-
input 标签实现输入框带提示文字效果(两种方法)
-
js原生:把 input输入的文本,通过点击事件之后 input框内输入的文字消失,出现在下面的 div中。
-
javascript - 请问:在输入框内粘贴图片并上传到服务器,怎么用PHP+JS实现?
-
js+css实现增加表单可用性之提示文字_javascript技巧
-
js+css实现增加表单可用性之提示文字_javascript技巧