Detect focus loss for input element, not onBlur - javascript

I'm implementing an autocomplete/combobox in dart. I'm using two elements for this, a <input type="text"> and a <ul> for the suggestions. I want to hide via css style display: none whenever the user leaves the input box. This works when using onBluron the input element.
If the user tries to click an item in the <ul>, the input looses focus and the <ul>is hidden before the click event on the <li> is run.
_listElement = new UListElement();
_textElement = new TextInputElement()
..onBlur((e) => setDisplayToNone(_listElement)); // hide element
I noticed that a jQueryUI implementation does not have this issue and I can not figure out how they detect when to hide the suggestion box. see https://jqueryui.com/autocomplete/
What alternate way can i use to hide the <ul> without hiding it on _textElement.onBlur?
If it helps, the two elements are always wrapped by a <div>. I'm looking for a dart-only solution, although vanilla-js answers that I can rebuild in dart are also appreciated.

Please look at events sequence:
input.focus
li.mousedown
input.blur
li.mouseup
li.click
So you might setup a flag variable, turn it up on li.mousedown, check it on input.blur and decide if you need to hide the list, and then turn it down on li.click

Related

is it possible to change an element on responsiveness?

just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this
First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again

jQuery select on div content

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?
The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.
In accordance with jQuery docs, "this event is limited to fields and boxes".
From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here
All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here
we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/

Setting focus on next dropdown instead of using blur() method?

Problem:
I have many drop downs with dynamic changes going on at all times. The problem is I am having to use the blur() method to disable focus so that the class depending on the selected value can be applied.
Is there a way I can set the focus onto the next drop down element.
Tried:
Instead of blur(), I have tried this but it did not work.
this.next(".Element").focus();
Current code:
$('.Element').change(function () {
var colour = $(this).find('option:selected').attr('class');
$(this).removeClass().addClass(colour);
this.blur();
}).change
JS Fiddle:
jsfiddle of my code
try to make this a jQuery object to focus another element
$(this).next(".keyTechElement").focus();
EDIT 1:
Seeing your DOM, changes is needed. The .next() function selects siblings in the DOM and inside <td> there is no .Element sibling.
$(this).blur();
$(this).closest('td').next("td").find(".Element").focus();
http://jsfiddle.net/UXJZ7/2/
I think manipulating focus with focus() or blur() is terrible for keyboard users.
Users also detest auto-tabbing on forms they rarely use.
Onchange doesn't mean a selection has been made, a user could be stepping through the options with the keyboard (or with assistive technology that simulates the keyboard like speech recognition software), you get an onchange event for every step in their selection.
You can get quite elaborate to work around this, but it's rarely worth the effort.
For your example, I'd just leave things like this: http://jsfiddle.net/KWvMZ/ It looks like the only reason you have a focus state in your style is to display the text with sufficient contrast, so I just set the yellow background to have black text when focussed and left it like that.
.

Dropdown form field

With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?
I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...
Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.

disableSelection on everything except input[type=text]

I am looking to use jQuery's "disableSelection()" function because I have a lot of drag and drop on the pages but I do not want to disable selection on input boxes, just everything else.
I have tried
$('body').disableSelection(); $('input').enableSelection();
$('body').not('input').disableSelection();
still DISABLES EVERYTHING ON THE PAGE. Thank you.
With
$('body').not('input').disableSelection();
You disable selection on every instance of body that is not an input. Since body is not an input this will just disable selection on body.
Try this:
$('body *').not(':has(input)').not('input').disableSelection();
However, like other people pointed out it's probably pretty useless disabling selection on things that aren't draggable in the first place. So maybe you should replace body with .drag or however you can select all the objects that are draggable (keeping the rest of the function the same).
I dont think so disableSelection will work for input textboxes. It's useful for making text elements, or elements that contain text, not text-selectable. For example, if you have a draggable element, you may not want text selection to occur when the user goes to drag the element.

Categories

Resources