文本框获得失去焦点——js和jquery方法的对比 - bulote - ITeye博客

`

bulote

浏览: 1385725 次

最近访客更多访客>>

u012363178

songhait

chk141

sharpbai

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (1272)

社区版块

存档分类

2012-02 ( 25)
2012-01 ( 145)
2011-12 ( 22)
更多存档...

最新评论

文本框获得失去焦点——js和jquery方法的对比

阅读更多

Js方法

<head>
<wbr><wbr><wbr> <script type="text/javascript"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> function Doit() {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>// <strong> 获得一个input的数组,需要遍历</strong><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>var inputs = document.getElementsByTagName_r("input");<wbr></wbr></strong><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> for (var i = 0; i < inputs.length; i++) {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>// 如果是文本控件</strong><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> if (<strong>inputs[i].type == "text"</strong>) {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>// 前面有on——</strong><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> inputs[i].<strong>onfocus</strong> = function () {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>// 通过this直接获取触发的元素</strong><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>this</strong>.style.backgroundColor = "yellow";<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> };<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> inputs[i].onblur = function () {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> this.style.backgroundColor = "white";<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> };<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr> </script><br> </head><br> <body onload="Doit()"><br><wbr><wbr><wbr> <input id="Text1" type="text" /><br><wbr><wbr><wbr> <input id="Text2" type="text" /><br><wbr><wbr><wbr> <input id="Text3" type="text" /><br><wbr><wbr><wbr> <input id="Button1" type="button" value="button" /><br> </body><br> </html></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr></wbr>

Jquery方法

<head>
<wbr><wbr><wbr> <script src="jquery-1.4.1.js" type="text/javascript"></script><br><wbr><wbr><wbr> <script type="text/javascript"><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $(function () {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>//<wbr>不需要遍历</wbr></strong><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> $(<strong>'input[type=text]</strong>').click(function () {</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>// this前面要加dollar符</strong><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>$(this).</strong>css("backgroundColor","yellow");<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }).<strong>blur</strong>(function () { $(this).css("backgroundColor","white");});</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><strong>// blur前面没有on<br></strong><wbr><wbr><wbr><wbr><wbr><wbr><wbr> });<br><wbr><wbr><wbr> </script><br> </head><br> <body><br><wbr><wbr><wbr> <input id="Text1" type="text" /><br><wbr><wbr><wbr> <input id="Text2" type="text" /><br><wbr><wbr><wbr> <input id="Text3" type="text" /><br><wbr><wbr><wbr> <input id="Button1" type="button" value="button" /><br> </body><br> </html></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

分享到：

Js中的this和window.event.srcElement | 滑动变色——js和jquery对比

2012-01-30 05:49
浏览 1092
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

asp.net中TextBox获得焦点和失去焦点——客户端JavaScript事件: 当用户与TextBox交互时，我们有时需要在特定事件（如获得焦点或失去焦点）时执行一些功能，例如验证输入、更新界面或者提供反馈。本文将详细讨论如何利用客户端JavaScript事件来实现这些需求。首先，我们要理解...

js text文本框仿订机票网站城市选择: 这可以通过改变文本框的`value`属性完成，同时触发`.blur()`方法模拟失去焦点的效果，关闭弹出层。为了防止用户输入无效的城市，可以使用`.keyup()`监听键盘输入，实时验证并给出反馈。此外，项目可能还涉及了事件...

注册表单文本框占位符特效_files.zip: 这种特效通常利用JavaScript库，如jQuery，来实现输入框内提示文字的动态显示和隐藏，从而代替传统的静态提示文本。以下将详细介绍这一技术及其相关的知识点。首先，让我们讨论一下“占位符”（Placeholder）的...

JavaScript程序设计——事件处理实验报告.docx: - **表单事件**：如`onsubmit`（表单提交）、`onfocus`（元素获得焦点）、`onblur`（元素失去焦点）、`onchange`（元素值改变）。 3. **干预系统的事件处理机制**： - **停止事件冒泡**：通过`event....

JQuery入门——用映射方式绑定不同事件应用示例: 而当用户在文本框中输入内容后失去焦点（触发`change`事件）时，`#divTip`则会显示“执行的是change事件”。 3. 效果图预览：这个示例有两个主要的交互效果： - 光标置于文本框中（触发`focus`事件）：`#divTip`...

基于layui输入内容回车创建标签实例: 这个输入框通常会有一些基本的样式和事件监听，比如focus和blur事件，用于控制输入框的聚焦和失去焦点状态。 2. **键盘监听**：当用户在input中输入内容并按下回车键时，系统需要捕获这个回车事件。在JavaScript中...

Global site tag (gtag.js) - Google Analytics