栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jQuery 文本框得失焦点的简单实例

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jQuery 文本框得失焦点的简单实例

版本一

css代码部分:
复制代码 代码如下:
.focus {
     border: 1px solid #f00;
     background: #fcc;
}

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

html代码部分:
复制代码 代码如下:

   


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

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

jQuery代码部分:
复制代码 代码如下:


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

版本二:

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


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

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

这是一个简单的逻辑。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/108113.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号