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

 <!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. solr不是标准的java project解决方案

    官方默认提供的源码包并不是一个标准的Eclipse Java - Project,需要使用ivy进行构建,通过ivy的构建可以将下载下来的源码包转换成一个标准的java Project,然后我们就能把 ...

  2. easyui导出当前datagrid数据（Word）

    JS代码可参考http://www.cnblogs.com/mu1516633121/p/7753423.html 同样是winform架构下应用到Aspose.Words来读写Word文档 其中Se ...

  3. 05.部分类 partial

    namespace _06.部分类 { class Program { static void Main(string[] args) { } } /// <summary> /// 这个 ...

  4. 提示"No 'Access-Control-Allow-Origin' header"及Spring 中解决跨域问题

    问题描述 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://12 ...

  5. Oracle易忘知识点记录

    1.SQL Select语句完整的执行顺序: ①from子句组装来自不同数据源的数据: ②where子句基于指定的条件对记录行进行筛选: ③group by子句将数据划分为多个分组: ④使用聚集函数进 ...

  6. TransitionEnd事件

    定义和用法: transitionend 事件在 CSS 完成过渡后触发. 注意: 如果过渡在完成前移除,例如 CSS transition-property 属性被移除,过渡事件将不被触发. 浏览器 ...

  7. MySQL数据备份与还原(mysqldump)

    一 mysqldump指令实现数据备份.mysql指令实现数据还原 经常有朋友问我,DBA到底是做什么的,百科上说:数据库管理员(Database Administrator,简称DBA),是从事管理 ...

  8. Linux基础之-利用shell脚本实现自动监控系统服务

    目的:监控集群内nginx及nfs服务运行是否正常,如任一服务异常,则发送邮件通知用户 条件: 1. 主机及子机IP地址,hostname已确定: 2. 主机与子机能够免密通讯,即基于密匙通讯(相关命 ...

  9. 服务器端渲染VS浏览器端渲染

    1)浏览器渲染和服务器渲染区别:何为渲染?如果我们只是想显示一堆不变的数据,那么我们直接写一个a.html丢到服务器上让客户端访问就可以了.但这是基本不可能的事情,数据一般是变化的.你不可能为每套数据 ...

  10. 如何优雅地使用Markdown （Sublime 3 + MarkdownEditing+OmniMarkupPreviewer）

    最近开始上手Sublime 3 作为Markdown 的重度使用者自然关于Markdown的插件是必不可少的 . 在这里记录分享一下我常用的两款Markdown插件. MarkdownEditing ...