2013年9月3日星期二

About the JS onmuseover problem


I have a code module , this is taken into account ,
When my mouse touch the div element block , the code will be original in the div element is changed to the input element p
My code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
p{
width:110px;
height:30px;
padding:5px;
padding-top:20px;
padding-left:5px;
text-align: center;
}
p#quit{
background-color: #7FFF00;
}
p#search{
background-color: #00FFFF;
}
</style>
</head>

<body>
<div id="divSear" >
<p id="search" onmousemove="obtainedSearch()" onmouseout="leaveSearch()">搜索</p>
</div>
</body>
<script type="text/javascript">
function obtainedSearch(){
var srcSear = $("search");
srcSear.style.display="none";

var divSearCon = document.createElement("p");
divSearCon.id = "divSearCon";
var conSear = document.createElement("input");
conSear.type="text";
conSear.style.width="100%";
conSear.style.height = "21px";
var conText = document.createElement("button");
conText.value = "搜索" ;
conText.style.width = "50px";
conText.style.height = "20px";
divSearCon.appendChild(conSear);
divSearCon.appendChild(conText);

var div = $("divSear");
div.appendChild(divSearCon);
}
function leaveSearch(){
setTimeout("exeLeaveSearch()",5000);
}
function exeLeaveSearch(){
var div = $("divSear");
if( null != $("divSearCon") ){
$("divSearCon").style.display="none";
}
var relife = document.createElement("p");
relife.id = "search" ;
relife.innerHTML = "搜索" ;
div.appendChild(relife);
}
function $(id){
return document.getElementById(id);
}
</script>
</html>


------------------------- dividing line ------------------- -------------
questions:
I have this code , there is a problem .
Because, when I touch the "Search" after my code "into " input search box , and then five seconds later restitution.
However:
Question 1 , the first mouse through no problem, but no matter how many times behind after the mouse, is no reaction ! That is why
question 2 , in my code , even if I selected the text box , the focus is still, do not lose focus , but once in the five seconds immediately change ! I think my code should be 5 seconds regardless of whether he is sure to lose focus before resuming the initial stage , but I will not . [ Focus difficulty lies in my div elements increase the js itself ! I do not ah ! 】
Question 3 , my code , IE will display the button "Search " word , but not shown in chrome , and why ?


these three questions , I'm heartbroken, I saw JS almost 5 days ! Still uncertain about this, my heart good emergency ! ! !
because the company is about to start a project , and I think before this quickly learn !

I was a novice , ask for advice ! ! ! [ Three are looking to answer because I do not understand ! 】

------ Solution ------------------------------------ --------
question 1 , the first mouse through no problem, but no matter how many times behind after the mouse, is no reaction ! That is why

You can use what firebug, see your problem is that you first go through is because it is the beginning to refresh the page , the P tag there are ways , but you move , the method did not, so there is no responded

question 2 , in my code , even if I selected the text box , the focus is still, do not lose focus , but once in the five seconds immediately change ! I think my code should be 5 seconds regardless of whether he is sure to lose focus before resuming the initial stage , but I will not . [ Focus difficulty lies in my div elements increase the js itself ! I do not ah ! 】

5 seconds is the set up your own setTimeout ("exeLeaveSearch ()", 5000); you call this method, so only five seconds own changes if you do not want it , can change other methods , loses focus onblur, you can get an ID , you give it a try

Question 3 , my code , IE will display the button "Search " word , but not shown in chrome , and why ?

This should be a browser issue it, wood has Google , try not
------ Solution --------------------- -----------------------
just went into the next test, adding methods
relife.onmousemove = function () {obtainedSearch ()};
However, this method is very silent ah , in the past to refresh a lot , and I suggest you change it other way
In fact, I feel that you can set a hidden input text and button, and then move to that label when p , p labels hidden , the other two shows , then you can write a setTimeout to control the time, P shows that two hidden , there is no need to create a lot of elements in it
------ Solution ------------------------- -------------------
56 doers of the word line 59 changed to srcSear.style.display = "block"; like ;
------ Solution --------------------------------------- -----
do the project selected a framework to learn ah , native JS is prone to compatibility issues. .
------ For reference only -------------------------------------- -

var conText = document.createElement("input");
conText.type="button";
conText.value = "搜索" ;

The third question tried, okay , IE under no , not just Google , you put the button into input, and then type setting button bar
------ For reference only - -------------------------------------
var srcSear = $ (" ; search "); this is to take what ah ?
should be var srcSear = $ ("# search");
------ For reference only ---------------- -----------------------
Well you wrote to me mistaken own method of writing that using JQuery it
------ For reference only ---------------------------------- -----


my code line 30 srcSear.style.display = "none"! This is not to eliminate the entire srcSear occupied by what physical resources , resources are eliminated, how block it ? seek advice
------ For reference only ---------------------------------- -----


Question 1:
I have this code added two new , still valid , see:
My exeLeaveSearch () function to read:
function exeLeaveSearch () {
var div = $ ("divSear");
if (null! = $ ("divSearCon")) {
$ ("divSearCon"). style.display = "none";
} else {
alert ("It` s not null! ");
}
var relife = document.createElement ("p");
relife.id = "search";
relife.innerHTML = " Search " ;
relife.onMouseMove = "obtainedSearch ()"; / / added a new code
relife.onMouseOut = "leaveSearch ()"; / / added a new code
div.appendChild (relife);
}

However, the addition of these two or not to use ?

Question 2:
I noticed that you said the focus of the event with onblur, I found the help files inside, there onlur events and blur approach.
So what should I use it ?
I mean, not in html , but rather in

没有评论:

发表评论