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

 <!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. 阿里云两台服务器之间拷贝文件命令scp

    参考:云栖社区 不同的Linux之间copy文件通常有4种方法 1.ftp 2.samba服务 3.sftp 4.scp 最简单的方法就是scp,可以理解为ssh管道下的cp命令 把当前一个文件cop ...

  2. webpack使用extract-text-webpack-plugin打包时提示错误Use Chunks.groupsIterable and filter by instanceof Entryp

    转自:https://blog.csdn.net/gezilan/article/details/80020417 前提条件: 当前时间是2018年4月20日. webpack的最新版本为是 v4.6 ...

  3. three.js 在vscode的智能提示

    安装nodejs.启动或者重启vscode,打开控制台,输入命令 npm install --save @types/three 回车, 会多了个node_modules文件夹,再试试智能感知,出来. ...

  4. 在centos7中使用supermin制作centos6.5docker镜像

    原文 按照原文操作发现,版本并非是我们想要的,而是跟宿主机版本一致.不过可以到dockerhub上pull一个centos6.5的镜像 要安装使用docker 需要内核3.10以上,所以在虚拟机中安装 ...

  5. 【转】js判断一个object对象是否为空

    判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in... 遍历属性,为真则为“非空数组”:否则为“空数组” for (var i in obj) { // 如果不为空 ...

  6. 20个实用javascript技巧及实践（二）

    21. 使用逻辑AND/OR来处理条件语句 var foo =10; foo ==10&& doSomething();// is the same thing as if (foo ...

  7. 07_zookeeper的客户端工具curator_基本api

    [zk原生api的不足之处] * 不能自动超时重连,需要手动操作 * watcher事件注册一次后就会失效 * 不支持递归创建节点 [ Apache curator ] * 解决了watcher的注册 ...

  8. 【热门活动】开年好运开门来！送祝福，赢iPad

    羊年新的云端征程起航,阿里云邀请了众多云上客户给大家送祝福啦,听听他们的寄语,用云计算增强你的竞争力,一起赢在云端! 想赢iPad吗?参与我们的微博活动,和大家一起送上云端祝福,就有机会把iPad带回 ...

  9. 面试准备之三Django知识

    Django请求流程 MTV模式 路由 视图 ORM 模板

  10. Netty入门3之----Decoder和Encoder

    ​ Netty强大的地方,是他能方便的实现自定义协议的网络传输.在上一篇文章中,通过使用Netty封装好的工具类,实现了简单的http服务器.在接下来的文章中,我们看看怎么使用他来搭建自定义协议的服务 ...