I am using jQuery Token Input plugin with one of my custom written plugins in one of my projects.
My plugin basically adds an anchor tag to an element that it was initialized on and upon clicking the anchor link a text input element is shown which is bound to jquery token input plugin.
On FocusOut event i want to hide the text input (in this case which would be a ul initialized by jquery token input in place of the text input).
All works fine till now.
But if I press the alt key, the main ul is hidden as expected but the dropdown ul is still visible.
To see the problem that i am facing you can also view this JSFiddle. Sorry, about the CSS part, i did include the CSS file but for some reason it does not work as expected.
Now, in the fiddle if you click the + Add button the input and the dropdown (with instructions) appears, then if you click anywhere else in the preview window, it disappears, which is what is expected behaviour.
But if you click on the add button and once the input and dropdown appears and then if you press the alt key (which initiates the focusout event) the input disappears but the dropdown still shows. Why is that ?
What could be the reason causing this ?
Update:
I apologize if I made it a little complicated. Following is comparison between the expected behavior and the problem.
Case 1: (focusout event triggered by clicking somewhere in the body).
In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user focuses out by clicking somewhere else in the body > The Input and dropdown disappears.
This is the expected behaviour.
Case 2: (focusout event triggered on alt keypress).
In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user presses the alt key which triggers the focusout event > The Input disappears but dropdown does not.
I need to make sure the dropdown disappears in this case too.
Note: The Dropdown CSS is messed up in the fiddle for some reason. The text that says type somethig is the dropdown element.
Add shortcut library and add the following code . It works
shortcut.add("Alt", function() {
$('.token-input-dropdown').hide()
});
Demo :http://jsfiddle.net/abdennour/dHSWu/5/
Likewise,be kept away the tags using margin to avoid overlapping of events
a.addInput{
margin:2px;
}
div.token-input-dropdown{
margin:2px;
}
Related
I am using angular-ng-autocomplete library at many places in my project.
But i faced 1 issue recently.
I have 1 button besides the autocomplete textbox. Whenever i select any option i am using it to add in the object.
But, Whenever i type something which is not in the dropdown list. At that time i can't click on the button until i click it twice.
So the 1st click is loosing focus from the autocomplete textbox and 2nd click is actually clicking on that button.
Demo
Try to type anything which is not in the loaded list. Ex: Test
Than try to click on 'Add' button, You will observe that you need to click twice.
For quick fix, I tried to read the mouseleave event on this ng-autocomplete, But it's also not being triggered whenever we are typing something. We need to loose the focus to make mouseleave works. And it's also not a good solution eitherway!
Any help?
Try this,
onFocused(e) {
// do something
this.auto.close();
}
Refer this for more https://github.com/gmerabishvili/angular-ng-autocomplete/issues/50
I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
My HTML structure is like this:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
The links are dynamically inserted inside the div that follows the input.
The links do not have an href value, so they are not really links, I just want them to act like links.
When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?
You can see it here.
Clarification: What I think is happening:
User clicks on link
Computer thinks, The user just clicked outside of the search box
Search box becomes blurred
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden
Now the links are no longer clickable, so the event is never triggered.
Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.
So if this is the click handler. Also i think it's time to add an id to your suggestion div.
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.
EDIT:
I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")
This way you can click anywhere in the suggestion box without the blur firing.
Alternatively, the mousedown event fires before the blur event. So try this maybe
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});
You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin
I'm using x-editable to inline edit some text. As long as I click on the label directly everything works fine. But, if I implement a button and want label to be edited on button click, then it won't work.
The reason being, clicking the label edits it and clicking anywhere outside label resets it. Here, when I click the button, its considered as a click outside and editable-label doesn't edit.
What to do? I don't want to go with setTimeout().
The following lines did the trick
I gave the Button a ID ("inline_editable_button")
jQuery("inline_editable_button").click(function(e){
e.stopPropagation();
jQuery('#editable_id').editable('toggle');
});
In IE when you choose an option and and it becomes the selected option the blue highlighting remains until you click somewhere else outside the select tag. (In firefox it's not that way)
SO I wrote a script removes focus from the element when there is a change event on the select .
But still one little problem stays: if i choose Hello and then again Hello option - the focus will remain and the blue highlighting. But if I choose hello and then world option -everything works.. so you see the script when you click on an option to remove the focus.
Then I saw that the user can just press enter without clicking the option -so I wrote the enter case
But as soon as i got happy i found a problem. there is one last case (i pray it's the last) which is almost the same as the previous - you click on the select and of course you see all the options and you see that the highlighted option in blue is what you want ) - but this time you decide not to press enter to select that option, but just to click again on the select tag -so in this case there is no click event on the option, no pressing of enter and no change event and the highlightening stays – Is there any way to fix that
$('#select').change(function() {
$(this).blur();
});
$('#select option').click(function(event) {
$('#select').blur();
});
$('#select').keydown(function(event) {
// Enter pressed
if(event.keyCode == 13) {
$('#select').blur();
}
});
although it is bad practice but try this
$('#select').mouseout(function(){$(this).blur();})
I am trying to find a solution to a simple thing, that looks complex!
I have a textarea where users can update their status.
Underneath it I have a checkbox (ex: for the user to choose to tweet the status or no).
What I try to do is this:
1/ When the textera get the focus, the textarea expands, for that it's fine.
2/ When the textarea loose focus, so when the user clicks out of it, it collapse. That's fine too...
The only problem is that if the user click on the checkbox, the textarea collapse too but I want to prevent it.
It should collapse and execute the function on blur, but not if the user try to interact with the checkbox.
I set up an example on this page: http://favosaurus.com/dev/onblur.php
thanks for your suggestions.
You're going to need to use Javascript.
Pseudocode:
if input blur, and checkbox not clicked:
do normal blur action.
else:
process checkbox click
focus input again