Jquery blur() effect on input and div - javascript

So I am building an input field with an auto-suggest box that suggests content based on the user's partial input into the field. Kinda like the tags box on stack. The auto-suggest box is absolutely positioned directly below the input field and only appears once the user begins to type text.
I want to make the box disappear when the input field is blurred, that is, when the user clicks anywhere else on the site. Normally, I would just use jquery's blur() function to hide the auto-suggest box. The problem is that if I do it this way, the user won't be able to select anything from the auto-suggest box because that would blur the input field and hide the auto-suggest box. I need to find a way to hide the auto suggest box if the user clicks anywhere except for the input field or the auto suggest box. Any ideas how I could set that up using jquery?
Imagine it is setup something like this:
<div id="auto_suggest">
<ul>
<li>Jane</li>
<li>john</li>
</ul>
</div>
<input type="text">

Use a timeout.
$("input, #auto_suggest, #auto_suggest a").blur(function() {
$('#auto_suggest').addClass('hiding');
setTimeout(function(){
$('#auto_suggest.hiding').hide();
},1000);
}).focus(function() {
$('#auto_suggest').removeClass('hiding').show();
});
$('#auto_suggest, #auto_suggest a').focus(function() {
$('#auto_suggest').removeClass('hiding').show();
});​
Updated to work well with tabs or clicks:
http://jsfiddle.net/iambriansreed/vUeeT/

Related

How to autofill a text field in a pop up using greasemonkey?

So basically I have a text field, with the following Elements.
// The element locators for the text box are as follows:
type="text" name="custom_version_ui" value="" id="custom_version_ui" placeholder="" class="custom form-control form-control-full "
I want to auto-fill the text box for "custom_version_ui" with a specific value. This text box is present in a pop and doesn't come during page loading. (It comes once I click on the Add result button on the page which renders the pop-up).
The URL of the page doesnt change when we click on the 'Add Result' button. Is there a way to auto-fill such fields?
A possible solutions would be to use setInterval to search for the field from the moment you open the page and fill it, if the field is found:
var getElem = setInterval(()=>{
var elem = document.querySelector("#custom_version_ui");
if (elem){
elem.placeholder = "specific value";
clearInterval(getElem);
}
},500);
Another option would be, to add an eventListener to the Add result button and (possibly with a slight delay) auto-fill the text box.

Is there a way to make a div act as an input field?

This is what I currently do.
This code is on a mobile device, so whenever I select the input field, the keyboard comes up and the current place with a focus loses its focus.
$("#scanner").select();
$("#scanner").on("keyup", function(){
getScannedItem($(this).val());
$(this).val('');
$("#scanner").select();
})
Is there a way to do this in lets say... a div or a p tag?
You could make an element editable.
<div contenteditable="true">
This text can be edited by the user.
</div>

How to lock focus on a text input box so that it is always active?

I am making a checkout screen that will go on a touchscreen that is attached to a barcode scanner, no other mouse or keyboard will be accessible from the user side. The scanner will scan into a text input box that I need to always be highlighted and active, even if someone accidentally clicks outside it, without them having to click inside the text input again to refocus it.
I have the input text box that the barcode will scan into focused and active upon load with the jquery below, but is there a solution to make that always focused, even when you click or touch outside of the input field? This is all I have so far to make it focus on load:
$('input[name="patronid"]').focus();
So even though the page has other elements like a footer and scrolling ad space, the only element I want to ever focus on is the input field with the text box and button to submit the barcode when they scan. Hope someone can help!
There's a blur event whenever a component loses focus. Just grab focus again whenever you get a blur event for this input.
$('input[name="patronid"]').focus();
$('input[name="patronid"]').blur(function(){
$('input[name="patronid"]').focus();
});
$('button').click(function(){
console.log('click detected - returning now to input field');
console.log('More can be done in here, if required');
//Turn off the .blur if needed
$('input[name="patronid"]').off('blur');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input name="patronid" />
<button>Ok 2 Click</button>

How to remove cursor from background text field

I am doing a task that display cafes around a location by using zipcode.
If we enter zipcode in a text field.it will get all cafes and display in a alert box.
Problem is if we enter zipcode and press enter cursor is presenting in background text field and if we enter any thing it is typed in that text field.
I think you want to remove the focus which is set to text box.
For that, you can have jquery blur() method.
To disable auto-focus on a particular element, pass the element id as below,
$(function(){
$('#someid').blur();
});

force the focus to leave a form field with jQuery in iOS when selecting non-input element

Using jQuery or something similar, is it possible to detect when a user has clicked away, effectively removed focus, from a form field in iOS? I have conventional form which has a first name, last name, address line 1, address line 2 etc.
On an iPad when you select a form field the only way to leave that form field is to select another field in the form by clicking it or by hitting the Previous or Next buttons in the keyboard pane.
As the keyboard pane is shown clicks to other non-input elements on the page are ignored, so focus remains on the form field.
Is there a way with jQuery/JavaScript (or anything else) to force the focus to leave the form field if I click away from it by clicking a non-input form element?
Here's an example of what I mean. In the screen below, when the focus is on the Line 1 element I can't move out of it by clicking a non-input element.
Try just doing a quick blur() on the form, that might work.
$('body').on('click', function () {
$('form').blur();
// And since you said selecting an anchor might help, potentially doing a:
$('a#whatever').blur(); // might do the trick too
});

Categories