前言:

项目中用到了一个功能,搜索框里有默认的文字,当搜索框获得焦点时里面的默认文字消失,如果失去焦点时搜索框内容为空则让里面的内容回复默认!,.

实现:

很轻松的在网上找到了类似代码

    $("#search_text").focus(function (event) {
with (event.srcElement)
//如果当前值为默认值,则清空
if (value == defaultValue) value = "";
});
$("#search_text").blur(function res(event) {
//捕获触发事件的对象,并设置为以下语句的默认对象
with (event.srcElement)
//如果当前值为空,则重置为默认值
if (value == "") {
value = defaultValue;
}
});

该代码很牛逼,用到了js里面的with语法(虽然书上说因为性能原因不建议使用with),而且完全支持IE6。

但是问题来了,连IE都支持的这段代码竟然在火狐上面出现了兼容的问题。

查了资料原来是

event.srcElement 意思是当前事件的源,我们可以调用它的各种属性,就像 document.getElementById(id) 一样。

IE下,event对象有 srcElement 属性,没有target属性;firefox下,event对象有 target属性,但是没有 srcElement 属性。他们的作用是一样的。

版本二:

    $("#search_text").focus(function (event) {
with (event.target || event.srcElement)
//如果当前值为默认值,则清空
if (value == defaultValue) value = "";
});
$("#search_text").blur(function res(event) {
//捕获触发事件的对象,并设置为以下语句的默认对象
with (event.target || event.srcElement)
//如果当前值为空,则重置为默认值
if (value == "") {
value = defaultValue;
}
});

好了,可以让你的代码在项目中运行起来了

event.srcElement在火狐(FireFox)下的兼容问题。搜索框获得焦点时默认文字变化的更多相关文章

  1. window.frames[]在Firefox下无法兼容的解决方式

    html代码段: <iframe id="fr" src="ProjectTree.aspx?IsFree=true&f=yes&IsCheckPr ...

  2. JavaScript在IE和Firefox的不兼容问题解决方法总结

    1.兼容Firefox的 outerHTML,Firefox中没有outerHtml的方法. if (window.HTMLElement) { HTMLElement.prototype.__def ...

  3. event.srcElement与event.target的区别

    window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用,因为 ...

  4. window.event.srcElement与window.event.target 触发事件的元素 触发事件对象的获取,window.event与时间函数参数的event是同一个 事件对象

    判断事件触发的元素:     var tag = window.event.target || window.event.srcElement;    if (tag.tagName.toLowerC ...

  5. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

  6. java简单的实现搜索框的下拉显示相关搜索功能

    最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...

  7. event对象在IE和firefox下兼容写法

    由于项目需求要求只能允许用户输入数字和小数,用到了event.keycode后IE系列.chrome浏览器都无问题,在firefox下出现了event not defined的错误 原因:火狐下eve ...

  8. event.srcElement兼容处理

    在IE下,event对象有srcElement属性,但是没有target属性:Firefox下,even对象有target属性,但是没有srcElement属性.. 解决方法:使用obj(obj = ...

  9. FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是point ...

随机推荐

  1. .net中类型转换的案例

    .net中三种数据类型转换区别((int),Int32.Parse() 和 Convert.toInt32() )(typename)valuename,是通用方法: Convert类提供了灵活的类型 ...

  2. Web浏览器的缓存机制

    Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...

  3. JavaScript的严格模式

    js除了在普通的常规模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).严格模式支持IE9+ Chrome FireFox 等主流浏览器. ...

  4. otl插入数据不成功

    原因是:void rlogon(...); 没有设置auto_commit为1,otl不会自动提交. 注意:static int otl_initialize (const int threaded_ ...

  5. Javascript设计模式之创建对象的灵活性

    传统的 /* Anim class */ var Anim = function () {}; Anim.prototype.start = function () { console.log(&qu ...

  6. JavaSE复习_6 枚举类

    △单例类是指只有一个实例,而枚举类实际上就是有有限个实例的类,在类里已经把实例定义好了. △枚举类的三种创建形式: 1) enum Week { MON,TUE,WED;//枚举类有默认构造函数创建的 ...

  7. golang 定时器

    上网查了下相关资料,基本上都介绍的是github.com\robfig\cron这个包来执行定时任务,试了下确实可以执行.但是此包下没有删 除任务的方法,只有暂停的方法(Stop),若要停止之前的任务 ...

  8. 彻底理解ThreadLocal

    ThreadLocal是什么 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地 ...

  9. Python装饰模式实现源码分享

    1.一般来说,通过继承可以获得父类的属性,还可以通过重载修改其方法. 2.装饰模式可以不以继承的方式而动态地修改类的方法. 3.装饰模式可以不以继承的方式而返回一个被修改的类. 4.基本实现 程序演示 ...

  10. phalcon: model 验证数据完整性

    The above example performs a validation using the built-in validator “InclusionIn”. It checks the va ...