saber 酱的抱枕

Fly me to the moon

06/11
2017
其他

input获得和失去焦点时文字改变的jq代码

saber 撰写 单条回复 1,691次查看

这份代码是由一份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
学习

js获取获得了焦点的元素

saber 撰写 无回复 1,236次查看

刚才有个同学问了个问题，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获得和失去焦点时文字改变的jq代码

saber 撰写 无回复 1,461次查看

input jq jQuery js value 焦点 表单

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，需要的话再加吧

input获得和失去焦点时文字改变的jq代码