javascript中onfocus,onblur事件提示不同文字效果

例子

表单中鼠标移进字体消失，移出提示字体显示

 代码如下 复制代码

//捕获焦点时
function onFocusFun(element, elementvalue) {
if (element.value == elementvalue) {
element.value = “”;
}
}
//离开输入框触发事件
function onBlurFun(element, elementvalue) {
if (element.value == “” || element.value.replace(/＼s/g, “”) == “”) { //鼠标移出后不管文本框中的值是否为空都替换为空
element.value = elementvalue; //将值赋予文本框
}
}
用法：<input type=”text” class=”"  value=”" id=”username” name=”username” onfocus=”onFocusFun(this, ‘用户名/手机号’)” onblur=”onBlurFun(this, ‘用户名/手机号’)”  />

现在这个年代对于网页优化都非常的重要了，我们可以使用jquery来实现并且jquery代码更简洁。

 代码如下 复制代码

<input id="xf_search" type="text" />
<script type="text/javascript">
(function (){ $("#xf_search").focus(function (){(this.value=='请输入楼盘名称')?this.value='':false}); $("#xf_search").blur(function (){(this.value=='')?this.value='请输入楼盘名称':false}); }());
</script>
时间： 2024-09-24 11:11:53

javascript中onfocus,onblur事件提示不同文字效果的相关文章

解析javascript中鼠标滚轮事件

  这篇文章主要给大家详细介绍了javascript中鼠标滚轮事件,图文并茂,十分的详细,有需要的小伙伴可以参考下. 所有的现代浏览器都支持鼠标滚轮,并且在用户滚动滚轮时触发时间.浏览器通常使用鼠标滚轮滚动或缩放文档,但可以通过取消mousewheel事件来阻止这些默认操作.有一些互用性问题影响滚轮事件,但是编写跨平台的代码依旧可以行.除了Firefox之外的所有浏览器都支持"mousewheel"事件,但Firefox使用"DOMMouseScroll",而3级D

浅谈javascript中this在事件中的应用

 这篇文章主要介绍了浅谈javascript中this在事件中的应用实例,非常有助于我们对this关键字的理解,这里推荐给大家.     this关键字在javascript中是非常强大的,但是如果你不清楚它是怎么工作的就很难使用它.   代码如下: function dosomething(){ this.style.color="#fff"; }   上面这段代码中的this指向什么呢,运行dosomething()会输出什么呢? 在javascript中,this总是指向当前执行

详解JavaScript中的自定义事件编写_基础知识

我们可以自定义事件来实现更灵活的开发,事件用好了可以是一件很强大的工具,基于事件的开发有很多优势(后面介绍). 与自定义事件的函数有 Event.CustomEvent 和 dispatchEvent. 直接自定义事件,使用 Event 构造函数: var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Disp

Javascript中活用事件触发对象动作

现在基本上我很少在对象里面写事情触发行为了,因为感觉那样做相同的对象代码利用率太低,容易导致代码冗余. 从学习W3C标准以来,对于代码我好像养成了一种怪癖,能统一复用的,就不会多写一点东西,这样前台页面代码看起来会清爽很多,而效率也会成直线上升. 下面来讲一下最近一个项目里面比较有代表性的东西. (实例可以查看这里http://www.pplive.com/zh-cn/view.html) 程序代码 <script type="text/javascript"> <!

javascript中window.event事件用法详解_基础知识

前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下: 描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子下面的例子检查鼠标是否在链接上单击,并且,如

浅谈javascript中this在事件中的应用_javascript技巧

this关键字在javascript中是非常强大的,但是如果你不清楚它是怎么工作的就很难使用它. 复制代码 代码如下: function dosomething(){ this.style.color="#fff"; } 上面这段代码中的this指向什么呢,运行dosomething()会输出什么呢? 在javascript中,this总是指向当前执行的这个函数,或者把函数作为方法调用的这个对象.当我们在页面上定义dosomething()这个方法后,this的所有者就是当前的页面,或

浅析javascript中的Event事件_javascript技巧

1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式:    1.点击 2.tab 3.js 2.(例子:输入框提示文字) onfocus:当元素获取焦点时触发:        element.onfocus = function(){};   onblur:当元素失去焦点时触发:        element.onblur = function(){};    obj.focus() 给指定的元素设置焦点 obj.blur() 取消指定

JavaScript中的onerror事件概述及使用_javascript技巧

1.Window.onerror事件 onerror事件用来协助处理页面中的JavaScript错误.当页面上出现异常时,error事件便在window对象上触发.例如:      在这种情况下,浏览器会显示错误信息: . 如果不希望浏览器在默认对话框中显示出错消息,让onerror方法返回true即可. 此外,onerror方法还提供了三个参数用来确定错误确切的信息,分别是: 1)message:一个字符串,声明了出现的错误的信息(不同的浏览器中返回的消息内容略有差异). 2)url:一个字符

IE中使用JavaScript中调用form.submit()提示“对象不支持此属性和方法”

 今天在项目中无意中遇到的一个神奇的问题,特此记录. 首先我们看看以下代码,测试页面可以看这里,页面的功能和逻辑很简单. 这段代码从逻辑上看没有任何错误和BUG,理论上是可以完全执行的. <html>     <head>IE 测试</head> <body> <script language="javascript"> function dosubmit() {     var theform = document.getE