Fire blur event unless specific element is clicked - javascript

I have three search categories (see first image). The user selects one and I show the search input that corresponds to that topic in the space of the categories (see second image). I automatically focus on the input with jQuery so the user can easily begin typing. If the user changes their mind and blurs the intput I hide it and again show the three categories.
This all works great if the user clicks enter to search, but I also want to allow them to be able to click the go button next to the search input field. The issue is that if they try to click the go button the input is blurred and then hidden and the submit click is never fired (I cannot unbind the blur event upon clicking this element because it is never fired - the blur is triggered first)
So is there any way to execute the function bound to the blur event (hiding the div) unless this "go" element is clicked using jQuery or JavaScript?

You have several options:
You can only hide the input on blur if the focus has gone somewhere outside its container, so if the focus has gone to the "Go" button, you don't hide the input at all.
You can your code design and fire the search question as an ajax call rather than a form submit.
You can hide the input on blur after a brief setTimeout() which gives the form submission a chance to get sent before it's hidden.

instead of placing the blur event on the input, place the blur event on the container that holds both the input and the Go button.

Related

Check if a blur event of an input field is fired while clicking on a radio button

I have an input field and two radio buttons. I would like to evaluate the form data whenever the form has changed. Strictly speaking, I want to react to the blur event of the input field. However, there is a situation where a user enters a value in the input field and (without pressing enter or clicking anywhere with the mouse) clicks directly on the radio buttons. Now there is the effect that the radio buttons are visually displayed to the user as checked, but the blur event is already fired. At this point, no radio button was technically checked yet.
For technical reasons, however, the radio selection must already exist in the form.
So my question is: Is it possible to check at the blur event whether the user has clicked on a radio button? It is about firing the event afterwards in such a special case (so that the selection of the radio button can be included in an evaluation).
(By the way: I use angular for my project. Just in case this could make a difference.)
Thanks in advance.

Click and change events in Aurelia framework

I am using Aurelia Framework for my SPA.
I have a change event in the input tag and click event on the "Continue" button with their respective functions as shown in the attached image.
The row where input and selects has been placed is a template(as separate view and view model), and this template is being composed in a page which have back and continue button.
Issue:
Case 1:
Page is loaded with default value of input tag and value is assigned using value.bind, now enter some value in the input tag and click on "Continue" button without losing the focus from input tag.
In this scenario only foo(change.delegate) is getting triggered not foo2(click.delegate)
Case 2:
Enter some value in the input tag and lose the focus, again enter some value in the input tag, now click on "Continue" button without losing the focus from input tag, foo2 is executed without any issue.
I am unable to understand this behavior.
I tried using "trigger" in-place of "delegate", even that is not resolving the issue.
Any suggestion or help is appreciated.

How to keep focus on input field after browser repaint?

I have multiple tabs and each tab has its own iframe. During the first rendering tab 1's input text field has focus using JQuery. After switching to tab 2 and coming back on tab 1 does not put back focus on the input field from tab 1.
As per my understanding focus will be set during DOM construction phase and will be rendered by the browser as it is. But on repaint no DOM re-construction happens so JQuery can not put back focus on the input field.
function clearSearchTxtInput(resetResults) {
$("#searchTxt").val('');
$("#searchTxt").focus();
}
Above code is called onload.
Is there a non-blocking way to put back focus on the input field?

Raise different events if a textbox is focused or not

I'm working on this page:
How it works: the "Consultar" button searches for the code in the "Código" textbox and reloads the page. The "Salvar" button calls a routine to save what you have changed in that item.
Here's what I gotta do: if the "Código" textbox is focused and the user press Enter, the event of the "Consultar" button must be raised. If the "Código" textbox is not focused and the user press Enter, the event of the "Salvar" button must be raised.
I don't know how to do this, I tried to do this using SetDefault button but it won't work cause I need a different button to be default depending if the textbox is focused or not.
I wonder I that I'll probably have to use some javascript, but I have no clue about how to do it.
Can anyone help me?
Thank you.
Bind an event handler to the keypress event on your document and then check if the input field is focused. If so, you can submit your search form, otherwise you continue with your saving logic.
See this fiddle to see it in action: http://jsfiddle.net/KkJ2t/

Manage mousedown events with javascript when highlighting and unhighlighting text

I've been working on some logic to process highlighted text by a user. I found a very good example by Mark Koli at http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html.
I've created a working example at: http://jsfiddle.net/metalskin/43c8h/8/
I have a problem with the code for a specific instance as follows:
select some text.
dialog appears.
close dialog.
now click without a drag to clear the highlighted text.
dialog appears.
close dialog.
text is deselected.
In my logic I'm not using a dialog (it's just easier as an example), I'm inserting a div with an image to allow the user to perform an action.
The problem is that the second click is really to clear the text, but for some reason the browser is firing the mouse up event before the browser clears the text (well under Firefox anyway). This is not obviously a problem with the dialog popping up, but with my logic I end up getting multiple div's added, and as such multiple floating images over the text.
Is there someway to determine that the event will result in the highlighted text being removed? Ideally I would rather the event fire after the browser has cleared the text.
I should explain the use case of how I'm using it.
user highlights text on a page
an icon appears above where they just released the mouse button from highlighting the text
the user selects the icon, which opens up a form to enter some details to mark against the highlighted text (the icon is removed at this point in time)
the user submits the form (ajax), the form closes.
page is displayed, highlighted text is now not highlighted (but extra markup is added).
or
user highlights text on a page
an icon appears above where they just released the mouse button from highlighting the text
the user clicks elsewhere on the page to both remove the highlighted text and remove the icon.
the user submits the form, the form closes.
I've no problems with the selected text being de-selected when the icon is chosen, but the problem is if they click on another part of the page, it reactivates the mouse event and thus double icons (or a dialog when it's not appropriate in the example provided).
Here you go ^_^
http://jsfiddle.net/43c8h/16/
I just changed this piece of code to clear the selection on the mouse up event.
if (selectedText != '') {
alert("You selected:\n" + selectedText + "\n");
window.getSelection().removeAllRanges();
}
Or if you wanted to keep the text highlighted after the user had selected it, you could call a mousedown function with the same window.getSelection().removeAllRanges(); code to clear the selection every time the mouse is clicked.

Categories

Resources