JS练习 改变文本框状态
Posted o0孤独夜莺0o
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS练习 改变文本框状态相关的知识，希望对你有一定的参考价值。
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="text/html; charset=utf-8" /> 5 <title>JS练习题</title> 6 <script src="../jquery-1.11.2.min.js"></script><!--引入jquery包--> 7 </head> 8 9 <body> 10 题目：创建4个文本框，当文本框内没有内容的时候显示白色，有输入内容时换色 11 <div> 12 <!--先在一个div里面创建4个文本框--> 13 <input type="text" class="txt" /> 14 <input type="text" class="txt" /> 15 <input type="text" class="txt" /> 16 <input type="text" class="txt" /> 17 </div> 18 </body> 19 <script type="text/javascript"> 20 $(document).ready(function(e) { 21 //假日一个使文本框失去焦点的事件 22 $(".txt").blur(function() { 23 if($(this).val().trim() !="") 24 { 25 $(this).css("background-color","#0FF"); //在文本框内输入内容，文本框的颜色就变成#0FF颜色 26 } 27 else 28 { 29 $(this).css("background-color","#C0F");//在文本框内不输入内容（进行了去空格处理）或者空字符串，文本框的颜色就变成#C0F颜色 30 } 31 }); 32 33 34 }); 35 36 37 38 </script> 39 </html>
以上是关于JS练习 改变文本框状态的主要内容，如果未能解决你的问题，请参考以下文章
html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value