夏日博客

A-A+

JavaScript中文本框焦点时边框变色

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

文本框焦点时边框变色其实是最简单了我们可以实现onfous时给它设置border色就可以当离开时就取消边框色就可以了,下面看一些例子.

JavaScript中文本框焦点时边框变色.

例子代码如下:

  1. function   appendit()    
  2.   {    
  3.   var   nodes   =   document.getElementsByTagName("INPUT");    
  4.   for   (var   i=0;   i<nodes.length;   i++)    
  5.   {    
  6.   var   ctype   =   nodes[i].getAttribute("type");    
  7.   if   (ctype   ==   'text')    
  8.   {    
  9.   nodes[i].onfocus   =   function   ()   {   this.style.backgroundColor='#33FF00';   }    
  10.   nodes[i].onblur   =   function   ()   {   this.style.backgroundColor='#3366FF';   }    
  11.   }    
  12.   }    
  13.   }   

测试:

  1. <input type="text" size="36" name="title" />  

再看一个例子,点击边框变色的文本框,鼠标点击文本框将要输入的时候,文本框自动变色高亮显示,非常有视觉效果,让文本框变漂亮了许多,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="textml; charset=utf-8" />  
  5. <title>输入框点击时边框变色效果</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">   
  9. // focusClass : 获取焦点时的样式  
  10. // normalClass : 正常状态下的样式  
  11. function focusInput(focusClass, normalClass) {  
  12.     var elements = document.getElementsByTagName("input");  
  13.     for (var i=0; i < elements.length; i++) {  
  14.         if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {  
  15.             elements[i].onfocus = function() { this.className = focusClass; };  
  16.             elements[i].onblur = function() { this.className = normalClass||''; };  
  17.         }  
  18.     }  
  19. }  
  20. </script>  
  21. <script type="text/javascript">  
  22. window.onload = function () {  
  23.     focusInput('focusInput', 'normalInput');  
  24. }  
  25. </script>  
  26. 请输入姓名：<input type="text" class="normalInput" />  
  27. <style type="text/css">  
  28. .normalInput {border:1px solid #ccc;}  
  29. .focusInput {border:1px solid #FFD42C;}  
  30. </style>  
  31. </body>  
  32. </html>  

在火狐下也有效，只不过火狐和chrome下，这两款浏览器默认会自动会输入框添加点击效果，所以有时候看不清，IE下表现突出。

把现在流行的基于jquery实现方法给各位介绍一个例子,代码如下:

Html code:

  1. <div class="fun">  
  2.    <h1>文本框聚焦清空默认值边框变色，离开焦点添加默认值</h1>  
  3.    <div class="text">  
  4.                <input  type="text" class="inputText" value="2222" />  
  5.                <input  type="text" class="inputText" value="2222" />  
  6.                <input  type="text" class="inputText ss" value="82747" />  
  7.                <input  type="text" class="inputText" value="094727" />  
  8.                <input  type="text" class="inputText" value="249049" />         
  9.                <input  type="text" class="inputText" value="333" />  
  10.                <input  type="text" class="inputText" value="82747" />  
  11.    </div>  
  12. </div>  

Css code:

这个是基于jquery库的啊,请自己加上啊,代码如下:

  1. <style type="text/css">  
  2. .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;}  
  3. .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;}  
  4. .inputText:focus{border:solid 1px #1398FF;box-shadow:0 0 5px rgba(0,192,255,0.4);}  
  5. .text{padding:15px 0 15px 75px;}  
  6. 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背景渐变*/  
  7. </style>  
  8. Js  code:  
  9. <script type="text/javascript">  
  10. // JavaScript Document  
  11. $(document).ready(function(){  
  12. function input()  
  13. {  
  14. //each遍历文本框  
  15. $(".inputText").each(function(){  
  16. var $val=this.value;//保存当前文本框的值  
  17. var $ss=$(".ss").val();  
  18. $(this).focus(function(){  
  19. //获得焦点时，如果值为默认值，则清空文本框的值  
  20. if (this.value== $val){  
  21. this.value="";  
  22. }  
  23. });  
  24. $(this).blur(function() {  
  25. //失去焦点时，如果值为空，则重新加上文本框默认值  
  26. if (this.value==""){  
  27. this.value=$val;  
  28. }  
  29. });  
  30. });  
  31. }  
  32. input();  
  33. })  
  34. </script>  
标签：

给我留言