JavaScript - Select And Focus
Hy ! I have this form:
PHP Code: <form name = "myform" method = "POST" action = "proba1.php"> Name:<br /> <input type = "text" name = "name" size = "30" onBlur = "namecheck()" /><br /> Username:<br /> <input type = "text" name = "username" size = "30" onBlur = "usercheck()" /><br /> Password:<br /> <input type = "password" name = "password" size = "30" /><br /> Repeat password:<br /> <input type = "password" name = "password2" size = "30" onBlur = "passcheck()"/><br /> Email:<br /> <input type = "text" name = "email" size = "30" onBlur = "mailcheck()" /><br /><br /> <input type = "reset" name = "reset" value = "Reset" /> <input type = "submit" name = "submit" value = "Submit" /> </form> and a Js file to check it: PHP Code: function namecheck() { var name = document.myform.name.value; if(name.indexOf(" ") < 0) { document.myform.name.focus(); document.myform.name.select(); alert("Pleaase enter your full name!") return false; } return true; } function usercheck() { var username = document.myform.username.value; if(username.length < 6) { alert("Username must be at least 6 chars!"); document.myform.name.focus(); document.myform.name.select(); return false; } return true; } function passcheck() { var password = document.myform.password.value; var password2 = document.myform.password2.value; if(password != password2) { alert("The two passwords not identical!") } } function mailcheck() { var mail = document.myform.email.value; var diff = mail.lastIndexOf(".") - mail.indexOf("@"); var diff2 = mail.length - mail.lastIndexOf("."); if(mail.indexOf("@") < 0 || mail.indexOf(".") < 0 || diff < 2 || diff2 > 3) { alert("Not a valid email adress!") } } So when a value is not proper,there should be an alert message,then select and focus on the field.But only the alert works.I can set the select and the focus to any other field from the current one ,but not to the current.(For instance:if the name is not good:document.myform.username.select() works,but :document.myform.name.select() not.) Can somebody help me? Similar TutorialsLet say I typed the word "Red", on input type text, is it possible with Ajax or Javascript to auto focus (highlight) the word "Red" on the select drop down list. I am looking at the net, but I can't find a code that does that. <input type="text" /> <select name=""> <option> Blue </option> <option> Red </option> <option> Green </option> </select> Hi I'm trying to write a data checking function that after it completes should return the focus to the text box that was checked and highlight everything in it IF the value was unacceptable. Here is the function: Code: <script type="text/javascript"> function chkValidity(numToCheck) { if (isNaN(numToCheck) == true || numToCheck < 0) { alert("Please enter a number greater than zero"); numToCheck.focus() numToCheck.select() return false } } </script> And here are the lines of code that would call the function: Code: <input type="text" name="numBedrooms" size="3" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="areaBedrooms" size="3" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="numLivAreas" size="2" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="areaLivAreas" size="3" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="numServAreas" size="2" maxlength="3" onblur="return chkValidity(this)" /> <input type="text" name="areaServArea" size="3" maxlength="3" onblur="return chkValidity(this)" /> What I find happens is that the data checking works and the error mesage displays, but the focus does not return to the text box. Any ideas? Regards Jenny Hi I'm banging my head against this problem and I'd really appreciate some help. I think the problem is cause by my lack of understanding of how the browser (firefox 3.6.3) handles focus. A simplified version of my problem is: I've defined the function Code: function two_focus() { document.getElementById("two").blur(); alert("hello"); } then in the body I have the form with two text boxes Code: <input id="one" type="text"><input id="two" type="text" onfocus="two_focus();"> When the page is loaded and I click in the second textbox I get the alert, all well and good. I OK the alert box, but when I click on box 1, or anywhere on the page for that matter, the function is called and the alert comes up. I just don't understand why the focus is being returned to the second box when I click anywhere in the browser window. Any comments will be gratefully received. Everything up until the focus line works, any ideas? Code: else { alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit."); document.delAdd.postcode.value = ""; document.delAdd.postcode.focus();} (sorry for the noobiness) Is there a way to focus on the most recent input to a text area (say after 50 inputs) without having to manually scroll down?? Code: function console(msg){ document.console1.input.value = document.console1.input.value+=msg document.console1.input.value.focus() } ~read that focus() should do it . . . but it doesn't Thanks! Hello, I have a search textbox field which populates the results in a dropdown after searched. But there is no way, to let users to explain to click or use the dropdown to see the results.. thus, I would like to have a focus on the dropdown, so after the user searches through the search textfield, and enter, the dropdown gets the focus so it will user friendly. can anyone help me on this. thank you in advance Hello, I am researching an issue in a rather big app which displays pdf files in IE window. The issue is that inside javascript code we call 'window.setTimeout( win.focus() ...)' (for the child window), but it doesn't come into focus every time, seems a bit random when it does and does not come into focus. At present I wrote a much smaller app + javascript to reproduce the issue, but it does not manifest in same way. Specifically this is the confusing part: window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" ); the 'win' does move, but never comes into focus. Any ideas about why the focus function does not accomplish what I'm trying to do? Here's the code of my simplified app + html + javascript: JAVASCRIPT: Code: var win; function f(s) { website="http://machine/apache/jsfnu/mytest" + s + ".txt"; if (!win) win = window.open( website , "thetest" , "toolbar=yes,resizable=yes"); else { win.url = website; } win.navigate(website); win.focus(); window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" ); } function emitApplet() { document.write("<APPLET CODE=\"mytest.class\" archive=\"mytest.jar,netscape.jar\" NAME=\"myApplet\" MAYSCRIPT HEIGHT=1000 WIDTH=1000> </APPLET>"); } function window_onUnload() { } JAVA code: Code: import netscape.javascript.*; import java.awt.*; import java.awt.event.*; public class mytest extends java.applet.Applet implements ActionListener { Button nextButton; Button prevButton; int _page=1; public void init() { System.err.println("init started"); setLayout(new FlowLayout()); System.err.println("setLayout done"); nextButton = new Button("Next!"); System.err.println("next button created"); prevButton = new Button("Prev!"); System.err.println("prev button created"); add(prevButton); System.err.println("prev button added"); add(nextButton); System.err.println("next button added"); nextButton.addActionListener(this); System.err.println("next button action"); prevButton.addActionListener(this); System.err.println("prev button created"); } public void actionPerformed(ActionEvent evt) { if (evt.getSource() == nextButton) { doButton(++_page); } else if (evt.getSource() == prevButton) { doButton(--_page); } } public void doButton(int page) { JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject) win.getMember("document"); JSObject loc = (JSObject) doc.getMember("location"); String s = (String) loc.getMember("href"); String []args = new String[1]; args[0] = (new Integer(page)).toString(); win.call("f", args); } public void paint (java.awt.Graphics g) { g.drawString("Hello, World9!",50,25); } } HTML: Code: <script type="text/javascript" src="StartTest.js"> </script> <html> <head> <title>try</title> </head> <body bgcolor="#fdf8ed" text="black" language="Javascript" onload="window_onUnload()"> <center> <script type="text/javascript"> emitApplet(); </script> </center> </body> </html> Hi I am opening a child window with the following href. If it is a completly new window, it is opened and the focus shifts to it, ... but ... if that href has been clicked on before and the window exists, the focus stays with the parent window and does NOT shift to the child How can I make the focus shift ? here is my href: PHP Code: echo "<a href='$Ad_detail' rel=\"external\" onclick=\"window.open (this.href, '$Ad_detail', 'height=800,width=960,scrollbars'); return false\" > I guess I need a "window. ??? focus();" in there somewhere - but I don't know what the ??? should be. If you can help - many thanks Have a jsp page with 10 editable fields and in last Add Button.Now when user edit a field from value 10 to 20(example)and click on Add .Value will be changed and focus will return to the same field.similarly for other fields.how to to .any code sample?
Hi, I need your help guys. I've got a little problem. I have some smileys which I enter to a textarea when clicking on them. It works perfect, but once the user clicks on a smiley, the focus goes off of the textfield. I use document.getElementById('message').value += smileycode It works perfectly, it enters the smileycode to the textarea. My problem is... When I say document.getElementById('message').focus() it goes back to where the cursors has last been so before the smileycode. Instead of this, I want the focus to go back after the insertion of the code. I hope it's understandable. And thanks in advance! I've got a div named "iframe_container". Inside it are an iframe used to display floor maps and another div named "compass_rose". I have a function that moves compass_rose around the map based on an office number. Now iframe_container is scrollable, it's only big enough to display about 2/3 of the map at any one time. I designed it that way to properly fit in the sharepoint site it's going in. To help some of our less tech savvy users it would be nice if iframe_container would automatically shift its view to keep the compass_rose visible at all times. Can that be done? Thanks. <div id="iframe_container" style="width:1000px; height:635px; position: relative; overflow:hidden"> <div id="compass_rose" style="top: 10px; left: 10px; position: absolute; z-index: 2; visibility:hidden;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div> <iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer" scrolling="no"></iframe> </div> I've got an older style frameset (3 frame within). Its a user browse/select set. Top frame is controls, middle is headings & sort control, bottom is the scrollable browse data. This needs a performance solution since it works fine when the browse data is low volume (or the network is blazing fast). The prob: Once the set is fully loaded the cursor is placed in a text box in the control frame allowing the user to be able to type a search term without having to click in the textbox. Problem is the cursor doesn't stick in the bottom frame after _all_ that data loads I tried: Code: window.parent.MCABrowseControl.document.getElementById('txtQuickFind').focus() alert("after") no errors of any kind and for a split second the cursor is visible -- and then is gone (the focus appears to revert to the bottom frames first input (a radio button) I messed with onreadystatechange but couldn't get my fx to fire when the state became "complete". It only fired once when "loading" Any methods/properties I can use to solve the issue of _waiting_ for all frames to finish before setting the focus(), and have it stay there? thanks function MyPopUpWin(message) { var iMyWidth; var iMyHeight; //half the screen width minus half the new window width (plus 5 pixel borders). iMyWidth = (window.screen.width/2) - (75 + 10); //half the screen height minus half the new window height (plus title and status bars). iMyHeight = (window.screen.height/2) - (100 + 50); //Open the window. var generator = window.open(); generator.focus(); document.onmousedown = focusPopup; document.onkeyup = focusPopup; document.onmousemove = focusPopup; generator.document.write('<html><head><title>Pop uP</title>'); generator.document.write('<p style="color:#C52B27;">'); generator.document.write(message); generator.document.write('</p>'); generator.document.write('</head><body>'); generator.document.write('<a href="javascript:self.close()"><img src="/img/save_orange.gif" border=0"> <\/a>'); generator.document.write('</body></html>'); generator.document.close(); } function focusPopup(){ if(generator && !generator.closed) { generator.focus(); } } Hi, does 'focus' method show a 'stable' result? i call this method on a node -- if this one is not absolutely positioned -- it seems nothing happens so ① does this method only apply to absolutely positioned element? also, in FF, aNode.focus() has no effect whereas in IE document will scroll until that node is visible if the node is partially invisible at the bottom. ②is this a bug in FF? here is the code Code: <div style="position:absolute; left:50px; top: 700px" onclick="this.focus();"> yepsfagadgre<br />agefderdsf<br />agefderdsf<br />agefderdsf</div> scroll the document until the text is half-visible at the bottom. click on it -- in IE it will scroll up while in FF nothing happens besides, if it is not absolutely positioned, nothing happens either~~~ thx in advance Hi Friends, I am setting focus in popup window .in IE it is working properly but in mozilla the same code is not able to set focus on image.please tell me the solution if u knows. My code is follows...myJsp.jsp========== <div class="smallDottedBlueLink" > <a title="" class="smallDottedBlueLinkAnchor" href="#" onkeypress="setFocusOnKeyPressPopUp(event);" onclick="setFocusOnClickPopUp();" id="Hotels_TnC_popUp">View Terms and Conditions</a> //focusNew1 is the id of the image in popup page. function setFocusOnKeyPressPopUp(event){ setTimeout('document.getElementById("focusNew1").focus();',1000); // setTimeout('dummy();',3000); } function setFocusOnClickPopUp() { setTimeout('document.getElementById("focusNew1").focus();',1000); } </div> =============html page===============popup code ==== <div> <div class="popup-top-corner-left-img"></div> <div class="popup-top-image"></div> <div class="popup-top-corner-right-img"></div> </div> <div> <div class="popup-left-image"></div> <div class="popup-div1"> <div> <div class="XX-Large-Dark-Gold-popUpText">ffffff</div> //id="focusNew1" for this id i need to set focus <div class="sprite-btn-close" id="focusNew1" onkeydown="javascript:return keyCheck(event)" onkeypress="javascript:closePopUpLayer1(event)" onclick="javascript:closePopUpLayer(),document.getElementById('Hotels_TnC_popUp').focus();" ></div> </div> <div class="popup-dark-gray-text">fff</div> </div> <div class="popup-right-image"></div> </div> <div class="popup-bottom"> <div class="popup-bottom-corner-left-img"></div> <div class="popup-bottom-image"></div> <div class="popup-bottom-corner-right-img"></div> </div> please let me know in case any mistake i made ...its very urgent. ThanksIn advance. I wish to have a form clear the default text from my form and allow the user to type in the field but if they move to another fields and do not enter anything in that fields they first went in to the fields restores to the default tetx that was in there before. i have name: tel: state: in the fields by default. i have heard this should be done using javascript can someone help me out here with some coding. i have tried to find it but only find ones that use on focus and for only one fields not multiple Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form name="form1" method="post" action=""> <input name="name" type="text" id="name" value="Name: "> <br> <br> <input name="email" type="text" id="email" value="Email: "> <br> <br> <textarea name="message" id="message">message: </textarea> <br><br> <input name="submit" type="submit" value="Submit"> <input name="" type="reset"> </form> </body> </html> Hey there, I have a form which open in a jQuery Fancybox Window. The fancybox window opens automatically when the page loads. When it loads, I would like it to set focus on the username field in the form in the Fancybox window. I have found that this must be done when fancybox is envoked, thus I have tried the below code which does not work : Code: <script type="text/javascript"> jQuery(document).ready(function() { $("#hidden_link").trigger('click'); document.getElementById('login_form.username').focus(); }); </script> The form name is "login_form" and the field name is "username". Can anyone help???? Thanks a lot!!! I'm trying to set the contact form on http://gspbuzz.com/test to remove the text when a user clicks it. Any idea how I can accomplish this?
Is there a way to give an input or textarea field the focus and set the focus to begin right at the end of the current text in the field?
Hi, Can someone direct me to what do i need to get something like this going: When a user clicks on a button to focus a windows program thats already running Thanks |