java文本框失去焦点事件,jQuery 文本框得失焦点的简单实例

版本一

css代码部分：

.focus {

border: 1px solid #f00;

background: #fcc;

}

当焦点获得时，添加focus样式，添加边框，并改背景色为#fcc

html代码部分：

个人基本信息

名称:

密码:

详细信息:

这里有两个input，一个textare框。

:input匹配所有 input, textarea, select 和 button 元素。

jQuery代码部分：

$(function(){

$(":input").focus(function(){

$(this).addClass("focus");

}).blur(function(){

$(this).removeClass("focus");

});

})

用:input匹配所有的input元素，当获取焦点时，就添加样式focus，通过$(this)自动识别当前的元素。focus()方法是获取焦点事件发生时执行的函数。blur()方法是失去焦点事件发生时执行的函数。

版本二：

有时候文本框里有默认的内容，作为提示信息，获取焦点后，要让它消失。可以做如下的改造：

$(function(){

$(":input").focus(function(){

$(this).addClass("focus");

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

$(this).val("");

}

}).blur(function(){

$(this).removeClass("focus");

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

$(this).val(this.defaultValue);

}

});

})

做个逻辑判断，如果值为默认值，就将文本框中的内容清空。

失去焦点，如果文本框中为空，也就是没有输入内容，就将值还设为默认值。

这是一个简单的逻辑。

java文本框失去焦点事件,jQuery 文本框得失焦点的简单实例相关推荐

java 输入框插件_[Java教程][英] 推荐 15 个 jQuery 选择框插件
[Java教程][英] 推荐 15 个 jQuery 选择框插件 0 2015-07-23 15:00:06 jQuery Selectbox Plugins let you create beaut ...
ajax webservice 参数类型,JQuery Ajax WebService传递参数的简单实例
Asp.NET中利用jQuery实现Ajax时,在服务器端可以使用aspx,ashx,以及WebService等方式.最近研究了一下WebService方式,jQuery Ajax 方法调用 jQue ...
html 多选框点击事件,jquery/javascript:单击复选框上的事件和“checked”属性
代码: $('input.media-checkbox').live('click', function(e){ e.preventDefault(); var that = $(this); if ...
html复选框美化插件,Labelauty – jQuery单选框/复选框美化插件
Labelauty – jQuery单选框/复选框美化插件分类:代码日期:2016-08-02 点击(38,744) 下载(0) 来源:未知收藏下拉框美化插件经常见到,如之前介绍过的 Drop ...
ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例
html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...
java 文本控件值变化,jquery文本框内容改变事件
随机推荐 &;04下简易安装 java安装首先需要上的网站下载在lib目录下建立一个jvm文件夹然后解压文件到这个文件夹- 编译安装服务端有一种方式是:下载-server-generic-u ...
java文本框添加单击事件_Java文本框上的ActionEvent事件
三个概念:事件源, 监视器, 处理事件的接口事件源能够产生事件的对象都可以成为事件源,如文本框.按钮.下拉式列表等. 事件源必须是一个对象,而且这个对象必须是 Java认为能够发生事件的对象. 监 ...
java switch小程序,微信小程序 switch组件详解及简单实例
微信小程序switch 相关文章: 实现效果图: 开关选择器属性名类型默认值说明 checked Boolean false 是否选中 disabled Boolean false 是否禁用 ...
JS：文本框失去焦点事件、获得焦点事件
文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后, ...
Javaweb-JavaScript失去焦点事件
首先,JavaScript的事件分为静态注册事件和动态注册事件,静态注册事件是通过html 标签的事件属性直接赋于事件响应后的代码:动态注册事件是是指先通过js 代码得到标签的dom 对象,然后再通过 ...

java文本框失去焦点事件,jQuery 文本框得失焦点的简单实例

java文本框失去焦点事件,jQuery 文本框得失焦点的简单实例相关推荐

最新文章

热门文章