I have a scenario where I need to put focus on h1 of overlay and not on next tabbable element.
Overlay is displayed after service call on blur from 1st input text.
Whenever blur event is fired focus is going to next tabbale element i.e. 2nd input text then h1 of an overlay. How can I resolve this issue?
I have a hack to put focus back on 1st input text then on h1 of overlay but I don't like this solution.
I have also tried preventDefault and stopPropagation() which don't work.
try setting tabindex of input2 lower than tabindex of input1, focus on h1 on display of overlay
Related
I have a div that the contenteditable attribute is true,
<div tabindex="1" id="editor" contenteditable="true"></div>
I have another div that acts like a button
<div>Click Me</div>
The problem am having is that after typing inside the editor box, I selected some text and when I clicked on the "click me" div the editor box looses focus and thus removing the highlighted text.
I used in js to programmatically send the focus back
document.getElementById("editor").focus()
But after this the selected text is no more selected the cusor just moves to the beginning of the editor box.
How do I get the focus to make sure the initial selected text is selected again after the click me has been clicked
One solution is setting user-select: none on your button-like div. If the browsers you care about support it, it's the simplest (but as discussed in the comments here, someone reported problems with getting it to work in Safari...)
Otherwise you'll have to save and restore the selection using JS, the text range module of rangy.js is useful for that. Check out https://stackoverflow.com/a/57546051/1026 for a usage example; in your case you'll need to save the selection onblur and restore it after processing the click on the button-like div.
I am making a checkout screen that will go on a touchscreen that is attached to a barcode scanner, no other mouse or keyboard will be accessible from the user side. The scanner will scan into a text input box that I need to always be highlighted and active, even if someone accidentally clicks outside it, without them having to click inside the text input again to refocus it.
I have the input text box that the barcode will scan into focused and active upon load with the jquery below, but is there a solution to make that always focused, even when you click or touch outside of the input field? This is all I have so far to make it focus on load:
$('input[name="patronid"]').focus();
So even though the page has other elements like a footer and scrolling ad space, the only element I want to ever focus on is the input field with the text box and button to submit the barcode when they scan. Hope someone can help!
There's a blur event whenever a component loses focus. Just grab focus again whenever you get a blur event for this input.
$('input[name="patronid"]').focus();
$('input[name="patronid"]').blur(function(){
$('input[name="patronid"]').focus();
});
$('button').click(function(){
console.log('click detected - returning now to input field');
console.log('More can be done in here, if required');
//Turn off the .blur if needed
$('input[name="patronid"]').off('blur');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input name="patronid" />
<button>Ok 2 Click</button>
Why browsers do not track the focusable elements, so that when we call blur on some element, the element, which was focused before, receives focus, and not the body?
Assume, there are several focus-capable elements on the page. The first one should be focused on load. Setting autofocus handles this. Later on some event we manually focus the second element, and again, later, on some other event, we blur that second element. The expected behaviour would be that previous focused element receives focus. But actually the body element gets activated (document.activeElement === document.body)
Setting <body tabindex=-1> has no effect.
Here is a simple demo: https://jsfiddle.net/9oenrguv/ The behaviour I would expect is: when we click the button, after a second the first input is focused, but instead body element is focused, though the first input was previously focused and also has autofocus attribute. Could somebody please explain, why body is focused, and if there is any way to prevent this?
Is the manual tracking of the previous active element is the only one way to achieve this?
Thank you.
I'm trying to make a simple rich text editor, and I'm getting stuck at the stupidest thing. For the bold buttons, instead of having a button, I'm trying to make it so that, near the top of the screen, there are several spans, and each one has a thing you can do to the text, such as bold, italic, underline, etc, and when you click on one I want it to toggle if the selected text in the contenteditable div is bold, italic, or underline. Basically, instead of buttons, I want to simply click on a span to toggle those things.
So I put a whole bunch of spans in the right place and put event handlers on them that did the appropriate execCommand. However, when the user clicks on the spans, it cancels the selection in the contenteditable div, so that the execCommand doesn't do anything. I tried setting the css user-select to none (I also used prefixes), cancelling the selectstart event, cancelling the click event, but it still cancels the selection when I click on it
You can see the jsfiddle here
I don't want to use a button instead of a span or anything. I don't want to do it in a hacky way (such as copying the selection on input, and then recreating the selection after the click) either
There's a few ways to achieve this. You can prevent the default mousedown behaviour like below:
document.getElementById('bold').addEventListener('mousedown', function (e) {
e.preventDefault();
});
FIDDLE
You can also just use the semantically correct elements such as <button> rather than <span>. If you do not like the way <button> element looks by default just re-style it.
FIDDLE
I have a bubble that pops up when you select some text on a document. Now when you select some text, the body click event fires too. On body event, I have code to hide the bubble that pops up when you select some text. The problem is, I want to show the bubble when the text is selected (even though body event has fired) but I want to hide it when clicked anywhere except inside the bubble.
$('body').live('click', function(e) {
if($(e.target).parents('.discuss').length == 0) {
$('.discuss').fadeOut(150);
}
});
... there is the body event code, now the discuss bubble shows up when some text is selected on the body, the discuss bubble is positioned near the selected text
In the body click handler look at e.target (srcElement in IExplorer). If the target/srcElement is different than the element containing the text you will now that the user has clicked somewhere else in the document and will close the bubble. If the target is the text element itself just return, no need to do anything.
I dont understand clearly by reading your question description.
But as your header title says on "second clik".
flag=0;
Why dont you set a flag value on first click on a hidden field.
(flag=1)
Then on second click check the hidden field value and do what you want. if(flag==1) do it
Show hide or whatever.
Dont forget to reset the value again.
have you tried using mouseup instead of click on the body? that way the bubble will only appear when visitor selected the text and releases their mouse...