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
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 have a input text field and a button to submit. I want the button to be enabled only when i enter something into text field. I used onchange="enableButton();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
but when i double click on input field a dropdown appears from cache and upon selecting the value from this dropdown no event fires.
Can anyone please suggest me how to do enable button.
I solved a similar problem by deferring onchange actions via setImmediate, which allows other pending events to be processed first. In your case, try setting onchange to this: onchange="setImmediate(enableButton)".
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;
}
I would like to know if its possible if I can have javascript change the values of other fields based on a user highlighting different options in a dropdown box before actually selecting the option?
So let's the user uses the mouse or arrows key to navigate through the list, before selecting an item. I would like other texts boxes to change their values as a result of this scrolling.
For the record, I have searched quite a bit. Also, the event actions (i.e. - mouse up, mouse down) only work when the dropdown box is first entered. Not on subsequent actions ... at least as far as I can tell. I also have commit selected value immediately checked, which helps because you don't have to leave the box before it fires.
Is what I want possible? Or can the scripts only run after the selection is committed?
Dropdown properties>Calculate>Custom calculation script. Place the script in that box for it to instantly update another place.
Use this formula in script:
var one = this.getField("fieldName 1").value; //fieldname 1 should be name of dropdown field//
if(one=="Administration") getField("fieldName 2").value = "Chief";<br>
if(one=="Apparatus Maintenance") getField("fieldName 2").value = "Engineer";<br>
if(one=="Confined Space") getField("fieldName 2").value = "Rescue Technician";
I think you should be able to fire some JavaScript whenever user changes highlighted option using keyboard. Because whenever a key is pressed, the OnKeyPress event of the combo is fired.
Support for mouse is trickier. When user hovers mouse pointer over an item in combo, no event is fired. The same OnKeyPress event is fired only when user actually clicks on an option.