We Keep Coding

Trigger text cursor programmatically like user actually clicked input tag

I'm trying to input some value into text field using javascript like Gmail email input tag.
But the problem happened with some of the fancy animations for their placeholder bind to some events that I don't know how to trigger, like images show below:
Input tag without focus/select:

Input after input something there:
Input tag with focus/select:
Then after I assigned the value, my value and the fancy placeholder will overlap each other.
I tried multiple ways, focus/select/click/both, nothing works. So I'm thinking if I can trigger that animation like user actually click it then assign the value to it may work.
How can I achieve this? or is there any other way to let that animation or their input check code capture my assigned value, so after that placeholder won't come down and overlap my value?

I'm not sure how you built you input, so there might be an easier way to handle it.
Because I personally use JQuery I would do it with the .toggle() function.
$(element).toggle();
You can also change the css attributes with the .css() function. Just create an on focus event and change the color etc in there.
Hope that was there you asked for.
Good luck :)

You can use focus and focusout from jQuery and toggle the classes with removeClass and addClass.
For example, you can do it like this :
$("input").focus(function(){
$(this).parent().addClass("is-active is-completed");
});
$("input").focusout(function(){
if($(this).val() === "")
$(this).parent().removeClass("is-completed");
$(this).parent().removeClass("is-active");
})
You can also use the materialize css's input.

Replicate click inside contenteditable <div> with spellcheck

Chrome's native spell check won't work on a contenteditable <div> unless the user clicks into the <div>, which makes sense. But if I'm adding a contenteditable <div> dynamically, is there a way to replicate a user clicking into the <div>> so that the spell check will work? I tried using jQuery:
$('#div-id').click();
and
$('#div-id').trigger('click');
but these didn't work. Any help? jQuery or JavaScript works for me.

As a comment mentioned, bringing focus to the element programmatically will work to enable spellcheck. But this might be undesirable due to the focus now being changed to another element. So here is a complete solution (not using jQuery but will still work with it):
var oldFocus = document.activeElement;
div.focus();
if (oldFocus) {
oldFocus.focus();
} else {
div.blur();
}
This saves the previously focused element before focusing the div in order to enable spellcheck. Then, the focus is returned to the old element (if there was one that already had focus), otherwise it makes nothing focused.

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
});

Detect if input has focus

One of my web app's page consists of a grid and a search box. I capture the keypress event to select through each of the grid's rows using the space bar. However, this creates a problem for when someone wants to look up a phrase in the search box.
I know that jQuery has a .focus method to bind an event handler to an input or give focus to an element. But how do I get a boolean value to determine if the search input has focus or not?

try this
if ($("#id").is(":focus")) {
alert('focus');
}
you can find more info on below link :
Using jQuery to test if an input has focus

Like so?
if($('...').is(':focus')){
}

Perhaps:
$(this).is(":focus");

Unselect a Select Input

I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?

I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed

Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.

Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');

I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.