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

 <!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. Nginx - 简易图片服务器

    安装 主要使用Nginx和vsftpd. 安装方面可以直接从nginx官网上下载,或者... yum install nginx 如果没有yum源则需要自行添加再进行install. yum inst ...

  2. 朝圣Java(问题集锦)之：The Apache Tomcat installation at this directory is version 8.5.32. A Tomcat 8.0 inst

    最近开始学Java了.有C#底子,但是学起来Java还是很吃力,感觉别人架好了各种包,自己只要调用就行了,结果还有各种bug出现.掩面中. 启动Tomcat的时候,报错The Apache Tomca ...

  3. RabbitMQ如何解决各种情况下丢数据的问题

    1.生产者丢数据 生产者的消息没有投递到MQ中怎么办?从生产者弄丢数据这个角度来看,RabbitMQ提供transaction和confirm模式来确保生产者不丢消息. transaction机制就是 ...

  4. python6

    集合-set    集合是高中数据中的一个概念.    确定的一堆无需数据,集合中的买个数据称为一个集合       集合的定义         1.创建空集合             变量 = se ...

  5. PHP开发框架CodeIgniter

    CodeIgniter 是一套给 PHP 网站开发者使用的应用程序开发框架和工具包. 通过下面四步来安装 CodeIgniter: 解压缩安装包: 将 CodeIgniter 文件夹及里面的文件上传到 ...

  6. 基于easyUI实现权限管理系统（三）——角色管理

    此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. role.jsp:角色管理界面 <!DOCTYPE html PUBLIC "-//W3 ...

  7. 定时器实现方式之TimerTask、Timer

    在未来某个指定的时间点或者经过一段时间延迟后执行某个事件,这时候就需要用到定时器了.定时器的实现方式有很多种,今天总结最简单的实现方式.java 1.3引入了定时器框架,用于在定时器上下文中控制线程的 ...

  8. Angular的生命周期钩子

    没有什么不能用一张图来解决.

  9. 001Spring 定时任务 Scheduled

    01.@Scheduled注解参数 @Scheduled支持fixedRate.fixedDelay.cron表达式参数.其中,fixedRate和fixedDelay没有区别,都是启动时执行1次,每 ...

  10. ES6入门——函数的扩展

    1.函数参数的默认值 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法.现在ES6可以为函数的参数添加默认值,简洁了许多. ES5 function show(a,b){ b = b ...