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.

How to trigger the HTML Select onClick event (activates select dropdown with options)

I want to know how to trigger the onClick event of any select(html combobox element).
I tried to do $('#MySelect').click(); using jQuery and tried document.getElementById('MySelect').click(); using pure javascript.
But the two don't fire the dropdown event that have the options of the select.
Ps: i have sure that selector $('#MySelect') exists.

are you looking for this
document.getElementById("MySelect").selectedIndex=3;

Programatically triggering a click event will only run the defined click handler for that element. As you say in the comments, you have no such method defined, therefore no action will take place.

How to detect rightclick + cut/delete/paste/undo in javascript?

In my JavaScript/jQuery code, I have a text field that I run an event when the text changes using the keyup event. However currently I only account for changes done using the keyboard.
Is there a way I can detect when a text field text changed because the user did a right click and clicked on cut or delete or paste or undo?
Note: This needs to work in IE9, and preferably Firefox and chrome, but definitely needs to work in IE9.
Thanks

jsFiddle Demo
Use jquery to bind an input event to the element like this:
$('#myInput').bind('input',function(){
//use this for the input element when input is made
var inputValue = this.value;//for example
});

As a start, this is not really the correct way to do it. But if you react on the mouseout event of a input you will most likely get it to behave the way you want.
$('#input').mouseout(function(){
if($('#input').is(":focus"))
console.log("Right-click");
});
Though it is to note that this might not work as well on textareas since they tend to be larger and the mouse might not be outside of it when the contextmenu has been clicked.
Note: Other than #Travis J that react to all interaction, this will (probably) only trigger an event on rightclick (and regular mouseout).

Detect change of select list using Jquery

Is there a way to detect when the value of a select list is set to empty by a javasscript and not by the user? It seems that the change-event only triggers by mouse or keyboard.
And is there a way to detect when the number of options in a select list changes (added, removed)?

You have to trigger the change event manually, when you are changing the value of a select with javascript. E.g:
$('#myselect').val(10).change();
In this example the value is set to 10 and the change event is triggered. If there is an event handler attached to the select, it will be executed.

Use Jquery's change function
$("#idofselect").change(function(){ });

To answer your first question, not it's not possible to detect what caused the change in the select list in the change event itself.
However, if there is javascript code changing the select list you could add some logic in there to perform the tasks needed in this scenario.

jquery: when i click a div, give focus to a textbox

$('.my-button').click(function() {
$(".my-textbox").focus()
});
Before Jquery 1.4 this used to be the way to call focus to a textbox, now it doesn't work. When I click the button, I want to call focus to the textbox, what i mean by "focus", is that I want the textbox to act like it was just clicked on, so that the user will not have to click on the textbox.
.focus is supposed to do an auto click onto the textbox i want it to, why isn't it working now? it broke in Jquery 1.4. I just need to know how to do it.

It still works. See here.
reference: jQuery focus docs
As mentioned there, calling 'focus' on one element may trigger 'blur' on another - and so use 'focusin' instead.

Your code works fine for me. However, it looks like you're trying to create a clickable label for an input element. If that's the case, there's an existing element named <label> that will do the job for you, no JavaScript required:
<label for="myTextBox">I'm a label, click me</label>
<input type="text" id="myTextBox" />
Example: http://jsfiddle.net/pkk6y/

Those are class selectors not IDs - not sure if that's relevant, but they're inherently not unique - particularly in the focus function jquery may just plain refuse - try using IDs (and #mybutton, #mytextbox)
Update: The jQuery doc page points out issues with IE:
The focus event does not bubble in
Internet Explorer. Therefore, scripts
that rely on event delegation with the
focus event will not work consistently
across browsers.