例子
| 代码如下 | 复制代码 |
|
function appendit() { var nodes = document.getElementsByTagName("INPUT"); for (var i=0; i<nodes.length; i++) { var ctype = nodes[i].getAttribute("type"); if (ctype == 'text') { nodes[i].onfocus = function () { this.style.backgroundColor='#33FF00'; } nodes[i].onblur = function () { this.style.backgroundColor='#3366FF'; } } } } 测试： <input type="text" size="36" name="title" /> |
|
再看一个例子
点击边框变色的文本框，鼠标点击文本框将要输入的时候，文本框自动变色高亮显示，非常有视觉效果，让文本框变漂亮了许多
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> <title>输入框点击时边框变色效果</title> </head> <body> <script type="text/javascript"> // focusClass : 获取焦点时的样式 // normalClass : 正常状态下的样式 function focusInput(focusClass, normalClass) { var elements = document.getElementsByTagName("input"); for (var i=0; i < elements.length; i++) { if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") { elements[i].onfocus = function() { this.className = focusClass; }; elements[i].onblur = function() { this.className = normalClass||''; }; } } } </script> <script type="text/javascript"> window.onload = function () { focusInput('focusInput', 'normalInput'); } </script> 请输入姓名：<input type="text" class="normalInput" /> <style type="text/css"> .normalInput {border:1px solid #ccc;} .focusInput {border:1px solid #FFD42C;} </style> </body> </html> |
|
在火狐下也有效，只不过火狐和chrome下，这两款浏览器默认会自动会输入框添加点击效果，所以有时候看不清，IE下表现突出。
把现在流行的基于jquery实现方法给各位介绍一个例子
| 代码如下 | 复制代码 |
|
Html code: <div class="fun"> <h1>文本框聚焦清空默认值边框变色，离开焦点添加默认值</h1> <div class="text"> <input type="text" class="inputText" value="2222" /> <input type="text" class="inputText" value="2222" /> <input type="text" class="inputText ss" value="82747" /> <input type="text" class="inputText" value="094727" /> <input type="text" class="inputText" value="249049" /> <input type="text" class="inputText" value="333" /> <input type="text" class="inputText" value="82747" /> </div> </div> Css code |
|
:
这个是基于jquery库的啊，请自己加上啊。
| 代码如下 | 复制代码 |
|
<style type="text/css"> .fun{margin:0 auto;width:1000px;overflow:hidden;box-shadow:0 3px 6px rgba(0,0,0,0.1);border:solid 1px #ccc;font-family:Microsoft YaHei;overflow:hidden;} .inputText{border:solid 1px #ccc;height:40px;width:200px;line-height:40px/9;padding:0 2px;box-shadow:inset 0 0 4px rgba(0,0,0,0.1);margin:10px 0;outline:none;font-family:arial;font-weight:700;text-indent:5px;color:#1C1C1C;display:inline-block;} .inputText:focus{border:solid 1px #1398FF;box-shadow:0 0 5px rgba(0,192,255,0.4);} .text{padding:15px 0 15px 75px;} h1{text-align:center;padding:10px 0;margin:0;background:-webkit-linear-gradient(#fcfcfc,#f9f9f9) repeat;background:-moz-linear-gradient(#fcfcfc,#f9f9f9) repeat;border-bottom:solid 1px #ccc;font-weight:400;text-shadow:1px 1px 3px #fff;}/*Css3背景渐变*/ </style> Js code: <script type="text/javascript"> // JavaScript Document $(document).ready(function(){ function input() { //each遍历文本框 $(".inputText").each(function(){ var $val=this.value;//保存当前文本框的值 var $ss=$(".ss").val(); $(this).focus(function(){ //获得焦点时，如果值为默认值，则清空文本框的值 if (this.value== $val){ this.value=""; } }); $(this).blur(function() { //失去焦点时，如果值为空，则重新加上文本框默认值 if (this.value==""){ this.value=$val; } }); }); } input(); }) </script> |
|