Stack Overflow
Stack Overflow

Questions tagged [onfocus]

onfocus is an event in HTML and JavaScript that triggers when the referenced object gains focus. This tag should be used only in conjunction with the primary language tag, and only for questions where the onfocus event is central to the issue(s) being addressed.

The focus event triggers when a visitor focuses on an element.

Not all elements are focusable by default. For example, INPUT and all types or form fields support this event, A supports it. As a counterexample, DIV doesn't support focus.

The list of elements types which support focusing is slightly different between browsers.

Tutorial

498 questions
9
votes
6 answers

jQuery onchange/onfocus select box to display an image?

I need some help finding a jQuery plugin which will allow me to display an image preview from a select list of images - onfocus/onchange.. Example:
user342391
  • 7,569
  • 23
  • 66
  • 88
8
votes
2 answers

How to clear datalist input on click?

I have this datalist inside a Lit-Element web component:
8
votes
4 answers

onblur onfocus infinite loop issue in chrome

A javascript function is used to validate the number is called in OnBlur event. if the value is not valid it will alert a pop up and return the focus to the field. The sample code: Enter your number:
Siva Sankaran
  • 1,521
  • 4
  • 21
  • 40
8
votes
7 answers

onfocus for form input to change border colour?

I'm trying to add a colour border to a form field when a user clicks on the field, I'm good at html and javascript, with a bit of php, but my css is actually quite poor. The code for the form etc is below. I would really appreciate if anyone could…
Niall Paterson
  • 3,580
  • 3
  • 29
  • 37
8
votes
4 answers

Change color using querySelector

I'm following a Javascript tutorial using a book. The exercise is change the background color in a using document.querySelector. When I try to search something with no text in the search box, the background from changes…
hugolcouto
  • 87
  • 1
  • 2
  • 7
8
votes
6 answers

How to set input:focus style programatically using JavaScript

I'm building a UI library in JS that can, without relying on any CSS stylesheets, create UI components, stylised from code. So far, it's been quite easy, with exception of styling different control states (such as input:focus one). Code that I use…
Siniša
  • 2,988
  • 4
  • 24
  • 36
8
votes
3 answers

Set cursor at a length of 14 onfocus of a textbox

Hai Guys, I want to set cursor at a position of length 14 on a textbox which will not have a value.. Iknow initially cursor will be at 0 i want it to be at 14
ACP
  • 34,682
  • 100
  • 231
  • 371
7
votes
2 answers

I want to put cursor in beginning of text-box onfocus

Possible Duplicate: Set cursor at a length of 14 onfocus of a textbox I am able to do that in firefox and IE. But for some reason its not working in Chrome and Safari :( I am simply using below line onfocus $('input:text').focus( function(){ …
Deepak Yadav
  • 1,724
  • 3
  • 23
  • 38
6
votes
1 answer

onclick vs. onfocus - Input text select behaviour differs. Why?

I see that when I select text in a text-box with the help of 'onfocus' function, I don't get the behaviour I expect. Here is the demo URL: http://jsfiddle.net/BquZz/ A copy of the code follows: Select…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/onclick" class="post-tag grid--cell" title="show questions tagged 'onclick'" rel="tag">onclick</a> <a href="../../questions/tagged/onfocus" class="post-tag grid--cell" title="show questions tagged 'onfocus'" rel="tag">onfocus</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 23 '12 at 12:28">asked Mar 23 '12 at 12:28</time> <a href="../../users/303363/susam-pal" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/303363.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Susam Pal" /> </a> <div class="s-user-card--info"> <a href="../../users/303363/susam-pal" class="s-user-card--link">Susam Pal</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">32,765</li> <li class="s-award-bling s-award-bling__gold" title="12 gold badges">12</li> <li class="s-award-bling s-award-bling__silver" title="81 silver badges">81</li> <li class="s-award-bling s-award-bling__bronze" title="103 bronze badges">103</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-7947936"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/7947936/open-the-dropdown-of-a-select-element-on-focus" class="question-hyperlink">Open the dropdown of a Select element on focus</a></h3> <div class="excerpt"> Possible Duplicate: How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)? Is it possible to open the drop down list of a Select element when the Select element gets focus? I know it automatically focuses…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/forms" class="post-tag grid--cell" title="show questions tagged 'forms'" rel="tag">forms</a> <a href="../../questions/tagged/tabs" class="post-tag grid--cell" title="show questions tagged 'tabs'" rel="tag">tabs</a> <a href="../../questions/tagged/onfocus" class="post-tag grid--cell" title="show questions tagged 'onfocus'" rel="tag">onfocus</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 30 '11 at 21:27">asked Oct 30 '11 at 21:27</time> <a href="../../users/1021111/user1021111" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1021111.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user1021111" /> </a> <div class="s-user-card--info"> <a href="../../users/1021111/user1021111" class="s-user-card--link">user1021111</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">61</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badge">1</li> <li class="s-award-bling s-award-bling__bronze" title="2 bronze badge">2</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-3737175"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/3737175/window-onfocus-not-firing-in-ie7-inconsistent-in-opera" class="question-hyperlink">window.onfocus not firing in IE7, inconsistent in Opera</a></h3> <div class="excerpt">Note that this relates to focus and blur events on a window, not on form fields. I'm loading a document in a pop-up window, and it includes the following code: <script type="text/javascript"> window.onblur = function(){ document.title="BLURRED";…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/internet-explorer" class="post-tag grid--cell" title="show questions tagged 'internet-explorer'" rel="tag">internet-explorer</a> <a href="../../questions/tagged/dom-events" class="post-tag grid--cell" title="show questions tagged 'dom-events'" rel="tag">dom-events</a> <a href="../../questions/tagged/opera" class="post-tag grid--cell" title="show questions tagged 'opera'" rel="tag">opera</a> <a href="../../questions/tagged/onfocus" class="post-tag grid--cell" title="show questions tagged 'onfocus'" rel="tag">onfocus</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 17 '10 at 16:29">asked Sep 17 '10 at 16:29</time> <a href="../../users/338518/ed-daniel" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/338518.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ed Daniel" /> </a> <div class="s-user-card--info"> <a href="../../users/338518/ed-daniel" class="s-user-card--link">Ed Daniel</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">522</li> <li class="s-award-bling s-award-bling__silver" title="11 silver badges">11</li> <li class="s-award-bling s-award-bling__bronze" title="22 bronze badges">22</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-31528606"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/31528606/get-previous-element-which-had-focus-after-tabbing" class="question-hyperlink">Get "previous" element which had focus after tabbing</a></h3> <div class="excerpt">I am working on keyboard management and stuck on this issue where I need to find the element which had focus before tabbing. For example lets say I have a list in html which looks like 1. Folder button 2. Account button 3. Setting Button 4. More…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/focus" class="post-tag grid--cell" title="show questions tagged 'focus'" rel="tag">focus</a> <a href="../../questions/tagged/onfocus" class="post-tag grid--cell" title="show questions tagged 'onfocus'" rel="tag">onfocus</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 21 '15 at 00:43">asked Jul 21 '15 at 00:43</time> <a href="../../users/4971386/rk8785" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4971386.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="rk8785" /> </a> <div class="s-user-card--info"> <a href="../../users/4971386/rk8785" class="s-user-card--link">rk8785</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">179</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badge">1</li> <li class="s-award-bling s-award-bling__bronze" title="9 bronze badge">9</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-31040611"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/31040611/manually-trigger-focus-on-input-iphone-issue" class="question-hyperlink">manually trigger focus on input Iphone issue</a></h3> <div class="excerpt">I am trying to focus a textarea after a click on a another element. desktop browsers seems to be working fine but not the Iphone. $('.reveal_below').on('change', function(e) { e.preventDefault(); var item_id = $(this).attr('data-item-id'); …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/ios" class="post-tag grid--cell" title="show questions tagged 'ios'" rel="tag">ios</a> <a href="../../questions/tagged/iphone" class="post-tag grid--cell" title="show questions tagged 'iphone'" rel="tag">iphone</a> <a href="../../questions/tagged/onfocus" class="post-tag grid--cell" title="show questions tagged 'onfocus'" rel="tag">onfocus</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 25 '15 at 03:16">asked Jun 25 '15 at 03:16</time> <a href="../../users/2032751/kalhan-toress" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2032751.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Kalhan.Toress" /> </a> <div class="s-user-card--info"> <a href="../../users/2032751/kalhan-toress" class="s-user-card--link">Kalhan.Toress</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">21,683</li> <li class="s-award-bling s-award-bling__gold" title="8 gold badges">8</li> <li class="s-award-bling s-award-bling__silver" title="68 silver badges">68</li> <li class="s-award-bling s-award-bling__bronze" title="92 bronze badges">92</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/onfocus_page=1" rel="prev" title="Go to page 1">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/onfocus_page=1" rel="" title="Go to page 1">1</a> <div class="s-pagination--item is-selected">2</div> <a class="s-pagination--item" href="../../questions/tagged/onfocus_page=3" rel="" title="Go to page 3">3</a> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/onfocus_page=33" rel="" title="Go to page 33">33</a> <a class="s-pagination--item" href="../../questions/tagged/onfocus_page=34" rel="" title="Go to page 34">34</a> <a class="s-pagination--item" href="../../questions/tagged/onfocus_page=3" rel="next" title="Go to page 3"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>