Develop Reference

Jquery on click not working when focus is in a text box

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

How to stop input from blurring within directive

I have a custom directive that should have the following functionality:
-display button upon load
-show input box and expand box when button is clicked
-show clear text icon when user types into text box
-clear text when icon is clicked and re-focus on text box
-minimize text box and show button when user clicks away from text box and clear text icon
Here's what I have so far: http://jsfiddle.net/Z6RzD/161/
My problem is that when a user clicks on the clear icon, the text box's blur function is fired and the box loses focus.
I tried creating a scope variable in my controller that will let me know which element has been clicked on. I then tried to share this variable in my directive's blur function but it comes up undefined.
$scope.clickElem;
$document.bind('click',function(e){
$scope.clickElem = e.target;
$scope.$apply();
console.log($scope.clickElem);
});
Any ideas on how to fix this? I appreciate any help.

If it's ok for you to use HTML5, you can just replace <input type="text"> with <input type="search"> and get the clear behavior for free. Here's your jsFiddle modified to do that.

try this..
var scope;
$('ELEMENT').click(function(e){
scope = e.target;
});
that should most def. not return undefined.

Closing keyboard on iPad in div contenteditable

Is there a way force the keyboard on iPad to close on blur of div 'contenteditable'??
Here is a basic jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/
I'd like to have the keyboard close when a user clicks on the button.
Any thoughts super appreciated.
Thanks.

As you have mentioned in your comment, element.blur() unfortunately doesn't work on an editable div. But you could instead move the focus to an actual input field and remove it again right away:
$('#otherBox').on('click', function(){
$('#orInput').focus().blur();
});
(This uses your jsFiddle HTML code).
There are downsides to this approach: you need another input field (which you can't set to display: hidden or visibility: hidden, but you can set it's size to 0 and opacity: 0). Also, the view may scroll to the location of this input field when the above handler is invoked. So you will need to place the second input field right next or behind to the editable div.
You will also need to take care of the input field not being targeted by the previous/next buttons: set it disabled.
<input id="orInput" disabled="disabled" style="width:0; height:0; opacity:0" type="text" />
For focussing/blurring you will then need to enable the field:
$('#otherBox').on('click', function(){
$('#orInput').removeAttr("disabled")
.focus().blur().attr("disabled", "disabled");
});
However, this is definitely a workaround. I haven't found any other solution yet (e.g. removing the contenteditable attribute doesn't work) but I'd very much like to hear other ideas.

You should be able to do exactly that -- attach an event listener to the button and use it to blur() the input field that caused the keyboard popup (use JavaScript to get a handle on that element and then call it's blur method). That supposedly closes the iPad keyboard.

How to show content of text box when I hover mouse on text box

I am creating above text box in my JSP file which getting populated in javascript(basically content inside textbox is dynamic not static). I want to display the content of text box when I take mouse over text box. Is there any function in javascript I can use for it?

Use the onmouseover event handler. Modify the input's text using the value property. You can also use an onmouseout event handler to clear the text when the mouse leaves the input if you need it. See it in this fiddle.
For instance:
<input id="anId" type="text"
onmouseover="this.value=calculateText(this.id)"
onmouseout="this.value=''">
Just in case you'd like to do the same thing when the <input> gets/loses the focus (by TAB for instance), use the onfocus and onblur event handlers.
UPDATE It turns out the OP wanted to dynamically change the title attribute of the input, so that it pops up in a tooltip when the mouse hovers over it. This can be achieved adding an onkeyuponinput event handler to the component that sets this.title to this.value. Learn more about oninput here.
<input type="text" oninput="this.title = this.value">

IE not rendering change in element display after changing it with javascript

Situation:
I have a check box and a div container inside another div container. When the check box or the label for the check box is clicked, the inner div's display style should change. If the display is set to block, then it should change to none and vice versa.
Code:
HTML:
<input id="oper_sale" type="checkbox" name="oper_sale" onchange="show_hide_operation(this, 'sale_block');">
<label for="oper_sale" class="public">Venta:</label>
<div id="sale_block" name="sale_block" style="display: none;">
AAAAAAA
</div>
Javascript:
// Show or hide parts of a form
function show_hide_operation (oper_choice, oper_block_id) {
var oper_block = document.getElementById(oper_block_id);
if (oper_choice.checked == true)
oper_block.style.display = "block";
else
oper_block.style.display = "none";
}
Problem:
This works fine in Firefox, but in IE it does not. When I click on the check box or its label, nothing happens. But, if I click anywhere else on the screen after clicking on the check box or its label, the change happens without a problem. I tried blurring the check box after it is click but it did not help.
In short:
IE does not render the change in display style until the user has click on a different part of the screen than what called the java script to change the style
Any help is greatly welcomed

IE doesn't fire .onchange for checkboxes until it loses focus, you may want to use the .onclick event here.

Use the onclick event, the change event in IE executes after the element loses focus.
Check this example.

In IE the onchange event obviously happens when the focus leaves the control, just as with an input with type="text".
Use the onclick event instead.