Showing results for tags 'focus'.

How to tell which <p> 'id=' has focus ?

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>  <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()">  <div class="Table">  <div id="Row1"> <div id="Row1Cell1"> <p contenteditable="true" id="mainHeading">MainHeading</p> </div>  </div>   <div id="container"> <div id="Row2"> <div id="Row2Cell1"> <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p> </div>  <div id="Row2Cell2"> <p contenteditable="" class="p_ah">Heading</p> <p contenteditable="" class="p_tgh">Text</p> </div>  <div id="Row2Cell3"> <p contenteditable="true" class="right_note" style="color:#576C15">notes</p> </div>  </div>  </div>   <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>  </div>  </div>  <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

Does an HTML5 Control Have Focus?

AARRGGHHH posted a topic in HTML/XHTML

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!

April 11, 2018
3 replies
- html5
- focus
- (and 1 more)
  Tagged with:
  - html5
  - focus
  - javascript

Failure to Transfer Focus

iwato posted a topic in JavaScript

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> <div id='pc_other' style='margin-top:0.8em;'> <span class="rightfloat"><input id='pc_other_input' type='text' name='other' value=''></span> </div> <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

Set focus on form (not input control)

ksa.dk posted a topic in JavaScript

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...

Not able to focus

naag posted a topic in JavaScript

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 ...

Javascript: object.focused = true?

tinfanide posted a topic in JavaScript

if (object.focused = true) {// do something} Is there a way to check if an element is focused in JavaScript?

May 11, 2012
7 replies
- focus
- object
- (and 1 more)
  Tagged with:
  - focus
  - object
  - boolean

focus() sets the cursor not at the end of the text, in Chrome and Safari

breaststroke posted a topic 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

January 28, 2012
1 reply
- cursor
- focus
- (and 1 more)
  Tagged with:
  - cursor
  - focus
  - focus()

Search the Community

Search By Tags

Search By Author

Content Type

Forums

Calendars

Find results in...

Find results that contain...

Date Created

Start

End

Last Updated

Start

End

Filter by number of...

Minimum number of comments

Minimum number of replies

Minimum number of reviews

Minimum number of views

Joined

Start

End

Group

AIM

MSN

Website URL

ICQ

Yahoo

Jabber

Skype

Location

Interests

Languages