Develop Reference

Why is this my jQuery keypress() event not working?

I have a text box
<input id="textinput" type="text" name="text_input" value=""/>
and a properly linked (did a console.log in the document ready function and it worked) jquery file
$(document).ready(function()
{
console.log("hi");
});
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
As far as I can tell, I'm doing everything properly. However, I am obviously not doing something right.
My goal is to make it so that whenever a letter/character (or any key, really) is pressed with focus on the textinput textbox, an event will trigger.
What am I doing wrong here?

Put the keypress function inside the $(document).ready() function:
$(document).ready(function() {
console.log("hi");
$( '#textinput' ).keypress(function() {
var tag_text = $(this).val();
console.log("key pressed");
});
});
JSFiddle

Try binding the keypress event in the $(document).ready() function. Your code works as intended.
$(document).ready(function() {
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
});

jQuery on "enter key" create content editabledom element and select it

$(document).ready(function(){
$( "p[contenteditable]" ).on( "keypress", function(e) {
var code = e.keyCode;
if(code == 13) { //Enter key
$(this).after('<p class="new" [contenteditable]>hi</p>');
$('p.new').css("color","red").focus();
e.preventDefault();
}
});
});
See this fiddle: http://jsfiddle.net/tehtrav/T2U9M/
I'm trying to create a new <p contenteditable></p> when the enter key is pressed and change focus to it, but the focus doesn't seem to trigger. It works if I set the focus to an element other than the new paragraph (see this fiddle), but not if I call focus on the newly created paragraph.
Any ideas?

When I use your code but take the brackets our of the creation of the new paragraph, it works
$(document).ready(function(){
$( "p[contenteditable]" ).on( "keypress", function(e) {
var code = e.keyCode;
if(code == 13) { //Enter key
$(this).after('<p class="new" contenteditable>hi</p>');
$('p.new').css("color","red").focus();
e.preventDefault();
}
});
});

hiding div if clicked anywhere in DOM

I have a a textbox in my app, onkeyup I show a div that gets result from database. so whenever user enters something I show the div, the problem is that I want to hide the div if users clicks somewhere else in the DOM.
just like when you select a drop down if you click somewhere else the drop down is closed.
Is there any builtin mechanism for this in jquery or javascript?

$( "body" ).click(function() {
$( "#yourDivIdHere" ).hide();
});
https://api.jquery.com/hide/

Use event delegation and check the originator of a click event. Something like:
$('body').on('click',function (e) {
var origin = e.target || e.srcElement;
if (/* [origin.id != your dropdowndiv.id] */) {
/* hide your dropdowndiv */
}
});

Try this.
Demo: http://jsbin.com/xatanicu/4/edit
$(document).ready(function() {
$('input').focusout(function() {
$(document).click(function(e) {
var targetId = $(e.target)[0].id;
if((targetId !== 'hide-div')) {
$('div').hide();
}
});
});
});

You can hide the result div when the textbox loses focus:
//vanilla JavaScript
textBoxId.onblur = divId.style.display = 'none';
//jQuery
$("#textBoxId").blur(function() {
$("#divId").hide();
});
UPDATE:
It should not hide the result div if the user clicked on the result div itself. (The answer is based on Action on blur except when specific element clicked with jQuery)
var keepFocus = false;
function hideList(){
if(!keepFocus){
$('#divId').hide();
}
}
$('#textBoxId').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 100);
}).focus(function(){
keepFocus = true;
});
$('#divId').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 100);
}).click(function(){
keepFocus = true;
});
See this solution in action here:
http://jsfiddle.net/XC2D7/

How to perform .select() on jQuery masked text input

I'm using http://digitalbush.com/projects/masked-input-plugin/ plugin.
There is an input text with defined mask:
<input type="text" id="txtMyInput" class="FocusSense"/>
and a script:
$(document).ready(function () {
jQuery(function ($) {
$("#txtMyInput").mask("?9.99");
});
$(".FocusSense").focus(function () {
this.select();
});
})
As you can see, I would like select all in txtMyInput on focus but but alas!
On focus, mask appears and lose .select().
What should I do to preserve mask and .select()?

I think what you are looking for, is this :
$(document).ready(function () {
jQuery(function ($) {
$("#txtMyInput").mask("?9.99");
});
$(".FocusSense").focus(function (e) {
var that = this;
setTimeout(function(){$(that).select();},10);
return false;
});
});
setTimeout will "queue" the select() execution. So it will select the content after masking is completed.
Working Demo

you need to use $(this) to get the current object.
$(document).ready(function () {
jQuery(function ($) {
$("#txtMyInput").mask("?9.99");
});
$(".FocusSense").focus(function () {
$(this).select(); // instead of this.select();
});
});

sory change focus change click function;
jQuery(".FocusSense").click(function() {
this.focus();
this.select();
});​

this.select() change jQuery(this).select();
$(".FocusSense").focus(function () {
jQuery(this).select();
});

This is duplicate of
'jQuery masked input plugin. select all content when textbox receives focus' where I posted explanation for this fix.
imeout method is unnecessary!
$(".yourMaskedInput").attr("readonly", true).select().removeAttr("readonly");

jQuery .click() is triggering when selecting/highlighting text

I have a <div> with a bunch of text in it. This <div> also has a .click() event on it using jQuery.
The problem I'm having is that the .click() is being triggered when selecting/highlighting text. Even holding the mouse down for several seconds before releasing.
Here is a JSFiddle that shows the issue: http://jsfiddle.net/ym5JX/
The behavior that I would expect is that highlighting text isn't the same as clicking on the element.

That's because a click is a mousedown followed by a mouseup. My suggestion is to check getSelection inside the click handler. If it's set, then you selected something, else you just clicked.
$('#click').click(function() {
var sel = getSelection().toString();
if(!sel){
alert("clicked");
}
});​
DEMO: http://jsfiddle.net/ym5JX/3/

As I posted on comment, mosuedown + mouseup = click which is exactly what highlighting does. There is workaround for this.. see below,
var isClick = 0;
$('#click').click(function() {
if (isClick == 1) {
alert("clicked");
}
}).mousedown(function () {
isClick = 1;
}).mousemove(function () {
isClick = 0;
});
DEMO

jsFiddle: http://jsfiddle.net/ym5JX/8/
$('#click').click( function()
{
if ( getSelection() == "" )
{
alert("clicked");
}
});