Search the Community
Showing results for tags 'focus'.
The search index is currently processing. Current results may not be complete.
Found 7 results
-
How to tell which <p> 'id=' has focus ? Hello & Thanks , The problem with 'document.activeElement.tagname' is that for p element it returns 'BODY' . But I want to know which p has focus . Pls, How can this be done ? Here is the prototype function I was working on . <!DOCTYPE html> <html> <title>Which Element Has Focus</title> <!-- --> <body onload="documentURL()" onclick="myFunction()" > <p>Click anywhere in the document to display the active element.</p> <input type="text" value="An input field"> <button>A Button</button> <p id="demo">Who dunnit ?</p> <br> <p id="currentPage_Address" style="fontsize: 12px; color: #34495E;">Current Page Address</p> <script> function myFunction() { var x = document.activeElement.tagName; document.getElementById("demo").innerHTML = x; } </script> <script> var p_tgh = ""; var pp_tgh = ""; var p_tghCount = 1; var p_ah = ""; var pp_ah = ""; var p_ahCount = 1; var ArticleHeading = "Heading"; var TextParagraph = "Text Paragraph"; var ButtonParagraph = "New Link"; var document_URL; const filename = "myStory.html"; var allHtml = document.documentElement.outerHTML; var document_URL; function documentURL() { document_URL = document.URL; document.getElementById("currentPage_Address").innerHTML = document_URL; // window.addEventListener("keydown", onPress_ENTER, false); } </script> </body> </html> And I would like to put some working code in here: 'function onPress_ENTER(event)' Triggered by this: 'window.addEventListener("keydown", onPress_ENTER' Here is the full code where I want to put "WhichParaHasFocus". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MyStory.html</title> <!-- file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/ https://www.freeformatter.com/html-validator.html <a href="https://developer.mozilla.org/en-US/" target="_blank"> <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" /> </a> still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it . --> <style type="text/css"> body { font-family: Comic Sans MS; height: 100%; margin: 0 auto; padding:0; } html { height: 100%; margin: 0 auto; padding:0; border: 0; } .Table {/* wrapper */ min-height:100%; text-align: center; margin: 0 auto; padding:0; } #mainHeading { color: #566573 ; text-align: center; width: 100%; background: #BCCE98; vertical-align: top; margin: 0 auto; padding:0; } #container { padding-bottom: 1001em; margin-bottom: -1000em; overflow: hidden; margin: 0 auto; padding:0; } #Row1 { display: block; width: 100%; vertical-align: top; margin: 0 auto; padding:0; } #Row2 { display: block; width: 100%; margin: 0 auto; padding:0; } #Row3 { width: 100%; margin: 0 auto; padding:0; display: inline; } #Row1Cell1 { color: #4C4C4C; display: inline-block; text-align: center; width: 100%; font-size: 18px } #Row2Cell1 { display: inline-block; background-color: #DAE9BC; width: 20%; margin: 0 auto; float: left; padding-bottom: 1001em; margin-bottom: -1000em; } #Row2Cell2 { display: inline-block; text-align: left; width: 60%; background-color:#F8F8FF; margin: 0 auto; float:left; padding-bottom: 1001em; margin-bottom: -1000em; } #Row2Cell3 { display: inline-block; width: 20%; background: #e9f2d7; margin: 0 auto; float: right; padding-bottom: 1001em; margin-bottom: -1000em; } #Row3Cell1 { display: inline-block; width: 100%; background: #BCCE98; margin: 0 auto; overflow: auto; text-align: center; } div{ text-align: left; font-size: 14px } .p_bn { text-align: left; } .p_ah { color: DarkGreen; text-align: left; font-size: 16px } .p_tgh { color: #566573; text-align: left; font-size: 14px } #left_note { color:#5886BC; } #left_note { color:#576C15; } #currentPage_Address { color:#e9f2d7; } </style> </head> <body onload="documentURL()"> <!-- Run me 1st --> <div class="Table"> <!-- ============NewRow============== --> <div id="Row1"> <div id="Row1Cell1"> <p contenteditable="true" id="mainHeading">MainHeading</p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> <!-- ============NewRow============== --> <div id="container"> <div id="Row2"> <div id="Row2Cell1"> <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p> </div> <!-- <div class="Cell" --> <div id="Row2Cell2"> <p contenteditable="" class="p_ah">Heading</p> <p contenteditable="" class="p_tgh">Text</p> </div> <!-- <div class="Cell" --> <div id="Row2Cell3"> <p contenteditable="true" class="right_note" style="color:#576C15">notes</p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> </div> <!-- id="container" --> <!-- ============NewRow============== --> <div id="Row3"> <div id="Row3Cell1"> <br> <button onclick="createLeftNote()">Add Left Note</button> <button onclick="createArticleHeading()">Add Heading</button> <button onclick="createTextArea()">Add Text Paragraph</button> <button onclick="createRightNote()">Add Right Note</button> <form action="http://google.com" target="_blank" style="display: inline;"> <input type="submit" value="Search Google" /> </form> <button onclick="saveAs(filename, allHtml)">Save This Page</button> <p id="currentPage_Address" > </p> </div> <!-- id="Row3Cell1" --> </div> <!-- <div class="Row" --> </div> <!-- <div class="Table"> --> <script> var LeftNote = "LeftNote"; var ArticleHeading = "Heading"; var TextParagraph = "Text"; var RightNote = "RightNote"; var ButtonParagraph = "New Link"; var document_URL; var filename = "myStory.html"; var allHtml = document.documentElement.outerHTML; var document_URL; function documentURL() { document_URL = document.URL; document.getElementById("currentPage_Address").innerHTML = document_URL; window.addEventListener("keydown", onPress_ENTER, false); } </script> <script> function onPress_ENTER(event){ var keyPressed = event.keyCode || event.which; //if ENTER is pressed if(keyPressed==13) { // alert('enter pressed'); event.preventDefault(); stopImmediatePropagation(); } else { return false; } } </script> <script contenteditable=""> function createTextArea() { var p_tgh = document.createElement("p"); p_tgh.innerHTML = TextParagraph; p_tgh.setAttribute("contenteditable", "true"); p_tgh.setAttribute("class","p_tgh"); var content = document.getElementById("Row2Cell2"); content.appendChild(p_tgh); } </script> <script contenteditable=""> function createArticleHeading() { var p_ah = document.createElement('p'); p_ah.innerHTML = ArticleHeading; p_ah.setAttribute('contenteditable', 'true'); p_ah.setAttribute("class","p_ah"); var content = document.getElementById('Row2Cell2'); content.appendChild(p_ah); } </script> <script> function saveAs(filename, allHtml) { allHtml = document.documentElement.outerHTML; var blob = new Blob([allHtml], {type: 'text/csv'}); if(window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, filename); } else{ var elem = window.document.createElement('a'); elem.href = window.URL.createObjectURL(blob); elem.download = filename; document.body.appendChild(elem); elem.click(); document.body.removeChild(elem); } } </script> <script contenteditable=""> function createNewButton() { var p_bn = document.createElement("li"); p_bn.innerHTML = ButtonParagraph; p_bn.setAttribute('contenteditable', 'true'); p_bn.setAttribute("id","li-Default"); var content = document.getElementById("nav-01"); content.appendChild(p_bn); } </script> </body> </html> Thanks
-
I'm having a problem determining if a given control has focus. It seems to me that: if (form.password.focus() == true) ... should tell me if the form's password control has focus. But, it's returning "false" even while I'm typing into the control. So, what is the correct way to determine whether a control has focus? Thank you!
-
The PROBLEM: The problem can be observed on the internet at overview.html. After the page opens: Find the words Weekly Podcasts in the page's navigation bar and click on them. After the page opens find the Seven Gates subscription form. Find the select control called Select a Language and click on it. Scroll to the bottom of the list until you arrive at the Not found? option and click where it says Click and enter! If the focus transfers to the newly opened window, then you can see something that I cannot. This failure to transfer focus is the problem. QUESTION: Why does the following code fail to realize the aforesaid mentioned transfer of the focus from the window containing the phrase Click and enter! to the newly opened, blank window? In effect, users cannot enter a missing language without first placing the cursor into the newly opened window. They cannot simply being typing after they click on the words Click and enter!. Alas. HTML <div id='pc_language_options' style='clear:both;'> <label for='pc_tongue'>Native Tongue:<span class="formlabel">*</span></label> <span class="rightfloat"> <select id="pc_tongue" name="language" style="width:auto;"> <option selected value="0">Select Language</option> ... <optgroup label='oceania'> <option value=mi>Maori</option> <option value=haw>Hawaiian</option> <option value=sm>Samoan</option> </optgroup> <optgroup label='Not found?'> <option id="not_found" value='other_tongue'>Click and enter!</option> </optgroup> </select> </span> </div><!-- end div#pc_language_options --> <div id='pc_other' style='margin-top:0.8em;'> <span class="rightfloat"><input id='pc_other_input' type='text' name='other' value=''></span> </div><!-- end div#pc_other --> <label id="pc_tongue_error" class="error" for="pc_tongue">This field is required.</label> JAVASCRIPT $('#pc_other').hide(); $('#pc_tongue').change(function() { if ($('#pc_tongue').val() == 'other_tongue') { $('#pc_other').show().focus(); } else { $('#pc_other').hide().focusout(function(){ $("label#pc_tongue_error").hide(); }); } }); By the way, this is hardly where my experimentation stopped. I have tried many ways using different combinations of the show(), hide(), focus(), focusin(), blur(), and focusout() functions -- and these, both with and without callback functions. Unfortunately, to no avail. I have learned, in effect, many different ways to mess up what already works, but I simply cannot get it to work with the desire enhancement -- a transfer of focus. Roddy
-
I know how to set focus on a specific input control, e.g. a text box, e.g.: <script type="text/javascript"> document.Login.brugernavn.focus(); </script> Now I have a web page with no input controls. The problem is that Page Down doesn't work until I click somewhere on the form to have it receive focus. I would like that to happen automatically when the page loads, but I haven't found a solution. The page contains two forms with tables inside. I have tried to use focus() on the form or on a (disabled) input control, but nothing works. Can anybody help me? Thanks in advance...
-
Title<img src="images/smallindex.jpg" /></td><td><html:select property="title"><html:option value="">--SELECT--</html:option><html:option value="Mr."></html:option><html:option value="Mrs."></html:option></html:select></td><html:submit value="submit" styleClass="button" property="method" onclick="onSave()"/>function onSave(){if(document.forms[0].title.value==""){alert("Title should not be left blank");document.forms[0].getElementById('personalInformation').title.focus();//document.forms[0].title.focus();return false;}} i donno what wrong in this script, it not focusing on title if it is empty....can u please someone help me..thanks ...
-
if (object.focused = true) {// do something} Is there a way to check if an element is focused in JavaScript?
-
Hello, I am trying to replace an emoticon for text into a textarea (Actually I may be interested in including the emoticon itself, but it seems to be more complex, and first I would like to learn how to do this.)I have the following in HTML: <a href="javascript:Smile(' [] ')"><img src="http://www.websmileys.com/sm/sad/239.gif" border="0" alt="imagen" /></a><br /><div style="text-align:center;margin-bottom:25px"><form name="formulariol"><textarea cols="40" name="textol"rows="4" id="txt" ></textarea></form> and the following, in Javascript, related to the former: <script type="text/javascript">function Smile(texto){document.formulariol.textol.value = document.formulariol.textol.value + texto;document.formulariol.textol.focus();}</script> It works fine, but either in Chrome or in Safari the cursor is set just before the text that replaces the emoticon, not after.I would like it to be at the end of the text, in all browsers.any idea about how to handle this, please? Thank you very much in advance. Regards
