PDA

View Full Version : focus()



zea726
12-06-2007, 12:20 PM
can anyone help me..

this is work in firefox but not working in IE

document.getElementById(Field_id).focus()

Thanks in advance if anyone can solve this.

boogyman
12-06-2007, 01:09 PM
that is the correct syntax so long as your page is set up similar to



<body>


<div id="Field_id">something that you want focused</div>


</body>



you do need to be careful that you have the case correct, although since it works fine in Firefox chances are it is correct....

there isn't a bug in IE that I know of at this time, however if you were to give us more of your code we specifics we would be able to help you.

If you are posting code USE [code] tags

Twey
12-06-2007, 06:20 PM
<div>s cannot receive focus.

djr33
12-06-2007, 07:08 PM
Focus places the cursor into an element (text fields), highlights a dropdown menu or otherwise activates an input item in a form. I don't believe any other element on a page can receive focus at all, as it would do nothing. Even if there were a way to theoretically focus it, it would be entirely worthless.

Now, as a sidenote, the other elements that can receive focus are different windows, like mypopup.focus(), or (I guess) frames/iframes.

Twey
12-06-2007, 07:36 PM
Links too. Generally speaking, any element with which the user can interact can receive focus.

djr33
12-06-2007, 08:04 PM
Well, any element that can interact with a user through standard html. Javascript can make any element interact, but that doesn't mean it'll focus.

Twey
12-06-2007, 10:20 PM
True.

djr33
12-07-2007, 05:13 AM
And getting back to the original question, this may be the problem-- how does one focus a particular popup div rather than another (ie setting the z-indexes). That becomes a complex problem.

jscheuer1
12-07-2007, 09:06 AM
The original question was on how to focus on what appears to be a field by its id. For that, the javascript focus() method would be fine. And, if it is a form field (even if it isn't in a form), it should work just as well in IE as in FF. However, the visual cue(s) that the focus has shifted to the field could well differ between these two browsers, though perhaps not. The method of actually accessing the field (including all supporting and incidental code) may be at issue, in fact that is probably the problem if this is a form field element.

If you need more help, zea726:

Please post a link to the page on your site that contains the problematic code so we can check it out.

zea726
12-07-2007, 02:49 PM
Thank you guys....

I think i should have ask it in slightly descriptive way....

Actually i am creating a cv editing panel....

So i have a page called "cv_container.php" where i have a form which have table.in different td of this table i am calling some pages using ajax....

Now in the main page(that i m calling) which also contains form (so i have two forms actually) have multiple text field... the task is to when u mouse over any field it will change its color and mouse out to its original color.but while u click it should focus. for this i have returned a html tag with same id as the html and trying to focus it, working on ff but not in ie. some html code and the 3 functions of javascript is given below

html


<td bgcolor="#CAE7F1">
<div id="show_st1_father_name"><input id="st1_father_name" value="<? echo $edit_value[father_name]; ?>" name="st1_father_name" type="text" size="48" onFocus="chekval_pinfo('st1_father_name');this.className='tdinputtext';" onBlur="showFatherName();" class="tdinputtext" style="background-color:#CAE7F1; border: none" onmouseover="zea('st1_father_name');" onmouseout="z('st1_father_name','#CAE7F1')" onclick="load_which('st1_father_name','hid_st1_father_name','show_st1_father_name','showFatherName()','#CAE7F1','48')">
</div>
</td>




javascript functions

function zea(id){
//onmouseover
document.getElementById(id).className="tdinputtext";
document.getElementById(id).style.backgroundColor = "#FFFFCC";
document.getElementById(id).className="tdinputtext";
//var html="<input type='text' id='st1_n' value='"+a+"' size='48' style='border:none; background-color:#FFFFCC' class='tdinputtext' onMouseOut='zea1(1,&quot;"+a+"&quot;,&quot;"+b+"&quot;,&quot;"+div_id+"&quot;)' onclick='zea1(2,&quot;"+a+"&quot;,&quot;"+b+"&quot;,&quot;"+div_id+"&quot;)'>";

//document.getElementById(div_id).innerHTML=html;
}

function z(id,color){
//onmouse out
document.getElementById(id).className="tdinputtext";
document.getElementById(id).style.backgroundColor = color;

}

function load_which(n1,h_id1,div_id1,check_func,color,f_size){
//onclick
var val=document.getElementById(h_id1).value;
if(n1=="st1_personal_text"){
textare(h_id1,div_id1);
}
else if(n1=="st1_currentsalary" || n1=="st1_expectedsalary"){
var v=document.getElementById(n1).value;
var arr = v.split("B");
var html="<input name='"+ n1 +"' id= '"+ n1 +"' value='" + arr[0] + "' type='text' onFocus='chekval_pinfo(&quot;"+ n1 +"&quot;);this.className=&quot; tdinputtext &quot;;' onBlur='" + check_func + "' size='"+ f_size +"' class='tdinputtext'>";
document.getElementById(div_id1).innerHTML=html;
if(n1=="st1_currentsalary")
document.getElementById("cs").innerHTML="&nbsp;BDT/month";
else
document.getElementById("es").innerHTML="&nbsp;BDT/month";
document.getElementById(n1).focus();
}

else{
var html="<input name='"+ n1 +"' id= '"+ n1 +"' value='" + val + "' type='text' onFocus='chekval_pinfo(&quot;"+ n1 +"&quot;);this.className=&quot; tdinputtext &quot;;' onBlur='" + check_func + "' size='"+ f_size +"' class='tdinputtext'>";
document.getElementById(div_id1).innerHTML=html;

//document.forms["personal_info"].elements[n1].focus();
document.getElementById(n1).focus();
}
if(n1=="name"){
name=1;
}
if(n1=="age"){
age=1;
}
}

Thanks guys once again

jscheuer1
12-07-2007, 03:08 PM
Just off the top of my head, when importing form HTML markup via Ajax in IE, the HTML must validate, otherwise IE just doesn't see it as you might expect it to.

Validate the generated page's markup first.

If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

zea726
12-08-2007, 05:01 AM
I am not getting u that much...

How to validate?

anyway thanks.

Its on process, i didnt put on web.

jscheuer1
12-08-2007, 05:45 AM
Validating imported and server generated content (that's what you have) is a little tricky. There are two steps. First, validate the external page(s). If they have server-side content on them, use the browser that is giving you trouble's 'view source' to get the source code that it is parsing for that page by loading it up in that browser and using 'view source'. Copy that code and save it as an HTML page, add the opening DOCTYPE (if it was stripped) and validate that. Go back to the original page to fix any errors. If the external page is just plain HTML, you can validate it directly.

Often that is all that is required. The second step would be to load up the 'top' page in the problem browser and import the content by doing whatever (usually clicking on a link) that causes Ajax to import the external content. Next, paste this into the address bar:


javascript:void(document.write('<textarea>'+document.documentElement.innerHTML+'</textarea>'))

and hit enter. Right click in the textarea, select all, copy and paste this output to an HTML page, it will be the generated content. Add the opening DOCTYPE and <html> tags at the top, and the closing </html> tag at the bottom. Validate that making whatever changes are necessary to the original external and 'top' pages, as needed to get the output to be valid.

http://validator.w3.org/

zea726
12-10-2007, 11:39 AM
Thanks guys...

Though in validating i have some problem.... however i have found a way to serve my purposes



setTimeout('document.getElementById("'+ id +'").focus()', 10);

Actually it needs some time for focusing... though its not a very intelligent way to solve this.

jscheuer1
12-10-2007, 11:55 AM
Ah then, the problem is that the imported content isn't there yet unless some time is allowed for it to be parsed. You could also use a poll or possibly an onmouseover or onmousemove event. The problem with a timeout is, when the page is live, 10 milliseconds might not be enough of a pause, and the time required would vary by network conditions and the user's connection speed. For something like this I would favor a poll function:


function pollFocus(id){
if(document.getElementById(id))
document.getElementById(id).focus();
else
setTimeout(function(){pollFocus(id);},300);
}

This requires that the id be completely unique of course.

zea726
12-11-2007, 04:49 AM
Wow!!!!!!

Great........

What an idea... really great

How could i thank u.!!


Thanks a lot