js之搜索框
程序员文章站
2022-05-03 11:43:50
目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息。 代码如下: ......
目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息。
代码如下:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>title</title> 6 </head> 7 <body> 8 <input class="i1" type="text" value="提示信息" onfocus="hide(this)" onblur="show(this)"> 9 <style> 10 .i1{ 11 color: gray; 12 } 13 </style> 14 <script type="text/javascript"> 15 function hide(ths) { //隐藏提示信息,样式去掉 16 ths.value = ''; 17 ths.classname = ''; 18 } 19 function show(ts) { //如果没输入任何内容或者搜索框空时,添加提示信息和样式 20 var cont = ts.value; 21 if (cont == '提示信息' || cont.trim().length == 0){ 22 ts.value = '提示信息'; 23 ts.classname = 'i1'; 24 }; 25 } 26 </script> 27 </body> 28 </html>
上一篇: 盒子阴影
推荐阅读
-
JS基础之undefined与null的区别分析_javascript技巧
-
css3+贝塞尔曲线实现可伸缩input搜索框效果
-
Node.js之HTTP/2服务器推送的实例分析
-
Prototype使用指南之enumerable.js_prototype
-
广搜优先搜索之迷宫问题
-
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)_javascript技巧
-
JavaScript 面向对象的之私有成员和公开成员_js面向对象
-
JS获取下拉框显示值和判断单选按钮的方法_javascript技巧
-
js加载之使用DOM方法动态加载Javascript文件_javascript技巧
-
自建搜索框,用中文拼音输入法时,输入拼音,尚未选定具体字符时,如何使uitextfield不把输入的拼音认作文本编辑框的内容?