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

 <!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. 将forme表单转换为Json对象

    //将Form 表单转换为Json字符串 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); ...

  2. .netCore2.0 依赖注入

    依赖注入(ID)是一种实现对象及其合作者或者依赖想之间松散耦合的技术对于传统的方法来说,获取类的方法通常用new如下 public class DIController : Controller { ...

  3. Magento 2开发教程 - 如何添加新产品属性

    添加产品属性是一种在Magento 1 和 Magento 2最受欢迎的业务. 属性是解决许多与产品相关的实际任务的有力方法. 这是一个相当广泛的话题,但在这个视频中,我们将讨论添加一个下拉类型属性到 ...

  4. [转]oracle update set select from 关联更新

    本文转自:http://blog.csdn.net/disiwei1012/article/details/52589181 http://www.blogjava.net/Jhonney/archi ...

  5. C#中去除字符串里的多个空格且保留一个空格

    static void Main(string[] args) { // 首先定义一个名为str 的字符串 string str="2         3  4     保留一个空格  ss ...

  6. git版本控制的使用

    特别说明:本文所有知识笔记是学习“表严肃”同学的git课程记录所得. 前辈个人网站地址:http://biaoyansu.com 特此感谢前辈! 一.git是版本控制利器 二.本地创建仓库 1.进入新 ...

  7. String.replace使用技巧

    relace replace() 方法返回一个由替换值替换一些或所有匹配的模式后的新字符串.模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数. 使用字符串 ...

  8. 第1章：程序设计和C语言（C语言入门）

    一.程序和程序语言 1,程序的概念:完成某项事物所预设的活动方式. 2,程序设计:人们描述计算机要做的工作. 二 .程序设计语言及其发展 1.机器语言,2汇编语言,3高级语言{a)编译,b)解释}: ...

  9. 动态赋值poster，无法显示

    vue操作video的poster属性时,动态给poster赋值,在chrome下是无法显示的 解决办法 在赋值后,找到video元素.load()下就会看到封面图了

  10. content-box跟border-box的区别

    content-box: padding和border不被包含在定义的width和height之内.对象的实际宽度等于设置的width值和border.padding之和,即 ( Element wi ...