题目：：创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。

 <!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="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <!--创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色-->

 <script src="jquery-1.11.2.min.js"></script>

 </head>

 <body>

 <input type="text" value="第一个" style="background-color:#C00"/>

 <input type="text" value="第二个" style="background-color:#C00"/>

 <input type="text" value="第三个" style="background-color:#C00"/>

 <input type="text" value="第四个" style="background-color:#C00"/>

 </body>

 </html>

 <script type="text/javascript">

 $(document).ready(function(e) {

     $("input").blur(function(e){

         if($(this).val() == ""){

             $(this).css("background-color","#F00");

         }else{

             $(this).css("background-color","#FFF");

         }

     });    

 });

 </script>

显示的结果：：

PHP----练习----光标离开文本框时变色的更多相关文章

  1. [原]创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur

    window.onload = function () {             var txts = document.getElementsByTagName('input');         ...

  2. 使用 elementUI 的表单进行查询，表单中只有一个文本框时，回车会自动触发表单的提交事件，导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

  3. JQ 让光标在文本框最末尾

    function setFocus() { //文本末尾获得焦点 var obj = event.srcElement; var txt = obj.createTextRange(); txt.mo ...

  4. [JS] 鼠标点击文本框清空默认值,离开文本框恢复默认值

    在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦 可以在文本框属性定义触发onfocus和onblur两个事件时对应的js功能 下面以asp.net代 ...

  5. 禁止backspace键(退格键)，但输入文本框时不禁止（兼容IE）

    Ext实现方式: Ext.getDoc().on('keydown',function(e){      if(e.getKey() == 8 && e.getTarget().typ ...

  6. Jquery / js 判断数据类型方法（限制文本框类型输入）

    当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...

  7. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  8. winform中文本框的一些案例

    项目中经常看到在输入金额时,会加逗号,最近在复习正则表达式,就联系下,界面如下:

  9. Jquery文本框小例（必填框）

    <script src="../JavaScript/jquery-2.0.2.min.js"></script> <script type=&quo ...

随机推荐

  1. mysql的线程处于System lock状态下

    The thread has called mysql_lock_tables() and the thread state has not been updated since. This is a ...

  2. 记一次java程序内存溢出问题

    一个自然语言处理程序,在封装为web-service后,部署到线上运行. 但最近出现了内存溢出的情况,频繁的out of memory. 先盲目尝试在启动脚本中增加-XX:-UseGCOverhead ...

  3. node版本管理nvm使用

    nvm:Node Version Manager,用来管理node版本,可以在一台机器上来回切换node版本,比较方便. win下建议使用 nvm-windows nodist linux下直接使用n ...

  4. 2019 Java面试题

    马上又是一个金九银十的招聘旺季,小编在这里给大家整理了一套各大互联网公司面试都喜欢问的一些问题或者一些出场率很高的Java面试题,给在校招或者社招路上的你一臂之力. 首先我们需要明白一个事实,招聘的一 ...

  5. hdu 4003 Find Metal Mineral 树形dp ，*****

    Find Metal Mineral Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Other ...

  6. C Primer Plus note4

    warning: implicit declaration of function 'pirntf' [-Wimplicit-function-declaration]| 这种警告是因为使用了 没有声 ...

  7. java 生成和解析xml

    本文主要使用的是Jdom.jar包(包的下载百度一下)实现了生成xml文件和解析xml文件 下面是生成xml的实现 说明:stuLists集合是一个存放着Student对象的集合 import jav ...

  8. Java基础重点知识之欣欣向然

    题目: 第一题:二重循环: public class Text01 { //完成歌曲排序的效果 public static void main(String[] args) { String[] zi ...

  9. mongoDB BI 分析利器 - PostgreSQL FDW (MongoDB Connector for BI)

    背景 mongoDB是近几年迅速崛起的一种文档型数据库,广泛应用于对事务无要求,但是要求较好的开发灵活性,扩展弹性的领域,. 随着企业对数据挖掘需求的增加,用户可能会对存储在mongo中的数据有挖掘需 ...

  10. Java 多线程使用

    工作中遇到的问题,记录下解决的思路 问题: 对磁盘进行碎片化测试(比如说,磁盘空间是16G),从64K开始写文件,写满后删除一半,然后写32K 的数据,写满后删除一半...直到4K写满删除一般算是结束 ...