StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery events - Ignoring focus on click
text
Body
copied!<p>I made a page with multiple elements that use the <code>contenteditable</code> property. I added the functionality that when you tab to the next element, the text is auto-selected (using a little plug-in I found on <a href="https://stackoverflow.com/questions/12243898/how-to-select-all-text-in-contenteditable-div">this answer</a>). </p> <p>But then if you tabbed to an element that was off the screen, the window didn't auto-scroll to show the element (at least in Chrome). So I used the <code>focus</code> event and <code>.animate()</code> to jump to the element.</p> <p>And now my issue is that I <strong>don't</strong> want to jump to the element if it is clicked on instead of tabbed to. It gets annoying when the element is already in view, but then jumps to the top of the page when you click on it. Here is <a href="http://jsfiddle.net/e5f5t/" rel="nofollow noreferrer">a fiddle to look at</a>.</p> <p>This is the code I'm using:</p> <pre><code>$.fn.selectText = function(){ var doc = document; var element = this[0]; if (doc.body.createTextRange) { var range = document.body.createTextRange(); range.moveToElementText(element); range.select(); } else if (window.getSelection) { var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); } }; $(document).on('focus', '.content', function(e) { var top = $(this).offset().top - 100; $(this).selectText(); $('body').animate({ scrollTop: top }, 25); return true; }); </code></pre> <p>I've tried using <code>stopPropagation()</code> and <code>preventDefault()</code> and changing around the binding order but to no avail. What's the best way to ignore this focus event on click but not on tab? Or is there a way to restore the original auto-scroll functionality?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload