06/11
2017
这份代码是由一份jQuery代码改写的,用来控制输入框获得焦点和失去焦点时,处理里面的值。
function focusblur(element) { var defval = element.value; //针对input element.onfocus = function() { var thisval = element.value; if (thisval == defval) { element.value = ""; } }; element.onblur = function() { var thisval = element.value; if (thisval === "") { element.value = defval; } }; } // 依次调用 var inputs = document.querySelectorAll("input[type=\"text\"]"); focusblur(inputs[0]); focusblur(inputs[1]);
这个代码里没有加对文字颜色的设置,如果有需要的话可以再加。
input获得和失去焦点时文字改变的jq代码
08/7
2015
刚才有个同学问了个问题,div里面有个超链接,但点击div时中的其他地方时,也有事件。这样如果点击超链接了,会同时触发“页面跳转”和“div上的事件”这两个事件。我们当然希望这两个事件互不影响。
后来我想到以前看过用js获取当前焦点元素的办法,找了出来,写了个demo,成功了。用的是document.activeElement属性。
原理就是div上发生onclick事件时,判断是不是里面的a标签获得了焦点。如果不是,则触发div上的事件。
demo如下:
<div id="a" style="border:1px solid #f00;width:300px;height:100px;"> <a href="bbbbb" id="b" target="_blank">bbbbbbb</a> </div> <script> document.getElementById("a").onclick =function (argument) { if(document.activeElement!=document.getElementById("b")){ window.open("aaaaa"); }; } </script>
经过试验发现,div是获取不到焦点的。简单的说,table不到div。如果点击div,获取焦点的是body元素。
之前我们想过做定位,让div和超链接处在不同的z-index上,经过试验,没用。但今天想到的有个思路看情况是可以选择使用的:
首先给内部元素设置一个属性,默认为false。当鼠标经过内部元素时,变为true。这样就可以判断点击发生时,点击区域是不是在内部元素上了。
js获取获得了焦点的元素
08/18
2014
input失去焦点和获得焦点jquery焦点事件插件,鼠标在搜索框中点击的时候里面的预设文字就消失了,在别的地方点击的话预设文字又出现了。
input需要设置id,然后在头部先引入jq,之后添加下面的js代码
//设置表单的预设value切换 jQuery.focusblur = function(focusid) { var focusblurid = $(focusid); var defval = focusblurid.val();//针对input var deftext = focusblurid.html();//针对textarea focusblurid.focus(function(){ var thisval = $(this).val(); if(thisval==defval){ $(this).val(""); $(this).html(""); $(this).css("color","#333"); } }); focusblurid.blur(function(){ var thisval = $(this).val(); if(thisval==""){ $(this).val(defval); $(this).html(deftext); $(this).css("color","#aaa"); } }); }; //注册 一个一个写 $.focusblur("#yy_name"); $.focusblur("#yy_tel");
两段color设置是我后来加的,第一个是点击之后,如果文字改变得和预设文字不同了,则把文字颜色加深,第二个则是失去焦点时如果没有任何文字了,则把文字重设为预设文字,颜色重设为指定的颜色。这样就ok了~
修改版:
jQuery.focusblur = function(element,defcolor,truecolor) { var focusblurid = element; var defval = focusblurid.val();//针对input focusblurid.focus(function(){ var thisval = $(this).val(); if(thisval==defval){ $(this).val(""); $(this).css("color",truecolor); } }); focusblurid.blur(function(){ var thisval = $(this).val(); if(thisval==""){ $(this).val(defval); $(this).css("color",defcolor); } }); }; $.focusblur($(".jbdh").eq(0),"#b7b7b7","#444");
这个里面没有加html,需要的话再加吧