Develop Reference

to make that input text field holds focus and not to lose when I click on something else (to focus always be on input with id="input_message")?

I made simple web chat, bubles ( messages) above one text field (input message) and send button. How to make that input text field holds focus and not to lose when I click on something else (to focus always be on input with id="input_message") ?

var el = document.getElementById('input_message');
el.focus();
el.onblur = function () {
setTimeout(function () {
el.focus();
});
};
Here's the fiddle: http://jsfiddle.net/MwaNM/

Here's a dirty hack.
<input type="text" id="input_message" />
<script type="text/javascript">
with (document.getElementById('input_message')) {
onblur = function(e) {
var elm = e.target;
setTimeout(function(){elm.focus()});
}
onkeydown = function(e) {
var key = e.which || e.keyCode;
if (key == 9) e.preventDefault();
// code for tab is 9
}
}
</script>

var inputElement = document.getElementById("input_message");
inputElement.focus();
inputElement.addEventListener("blur", function(event){
inputElement.focus();
});
http://jsfiddle.net/653w1mpv/

val() returns Placeholder value instead of the actual value in IE8,9 when the field is empty

Placeholder attribute shown below works fine in firefox but if val() is called when the field is empty it returns the placeholder value instead of the actual value in the text.
JSFiddle - http://jsfiddle.net/Jrfwr/2/
<input id="tlt" type="text" placeholder="Enter Title" />
JSCode
function placeHolderFallBack() {
if ("placeholder" in document.createElement("input")) {
return;
}
else {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
}

You could override the val() method but I don't like doing that :D
I wrote a simple pVal() function which does the job
$.fn.pVal = function(){
var $this = $(this),
val = $this.eq(0).val();
if(val == $this.attr('placeholder'))
return '';
else
return val;
}
$(function(){
alert($('input').val())
alert($('input').pVal())
});​
http://jsfiddle.net/W7JKt/3/

In your JSFiddle code you get the value of the textbox in a BUTTON CLICK event... and your code that checks if the current value of the textbox is equal to the placeholder executes in the FORM SUBMIT event.
So... the problem is that the BUTTON's CLICK event executes before the FORM's SUBMIT event.
This code shows an example of how to get the correct value
Hope that helps.

Its to do with HTML 5. Please see this article.
http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

How to set the value of a textbox when it has focus

I have a textbox with a keydown handler. The handler detects if you press escape and if so it is meant to clear the textbox value. However, calling tb.value = "" normally works, unless the textbox has focus in which case it does nothing. I suspect I have to select the text and delete it, but how? This is in Firefox 12.

Have a look at this:-
LIVE DEMO
HTML:
<input type="text" id="content" />
JS:
$(document).keyup(function(e) {
if (document.activeElement.nodeName == 'INPUT')
{
if (e.keyCode == 13) { // Enter
alert('Enter Key Up');
}
if (e.keyCode == 27) { // Esc
alert('Esc Key Up');
$('#content').val("");
}
}
});

How to disable Enter/Return Key After a function is executed because of it?

I have this function where #text_comment is the ID of a textarea:
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
textbox = $(this);
text_value = $(textbox).val();
if(text_value.length > 0) {
$(this).prev().append('<div id="user_commenst">'+text_value+'</div>');
$(textbox).val("");
}
}
});
What is happening is the text is appending when the enter/return key is hit (keyCode 13), but it is also moving the text a line down, as the enter/return key is supposed to.
This is occurring even though I set the value of the textbox to "".

How about event.preventDefault()

Try and stop your event propagation (See http://snipplr.com/view/19684/stop-event-propagations/) when entering the if(e.keyCode == 13) case.

try this one event.stopImmediatePropagation()
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
e.stopImmediatePropagation()
///rest of your code
}
});

I've tested this out, this works. The enter does not create a new line.
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
textbox = $(this);
text_value = $(textbox).val();
if(text_value.length > 0) {
$(this).prev().append('<div id="user_commenst">'+text_value+'</div>');
$(textbox).val("");
}
return false;
}
});
Although I am wondering, if you don't want to ever have a new line, why are you using a textarea, why not use a input type='text' instead ?

Answer here http://jsfiddle.net/Z9KMb/

Why input value can not be changed when pressing escape

I have an input (outside form) that captures name of an image. User should fill in a new name and hit enter. Ajax callback renames the image. This works.
I'd like to add ability to 'reset' the input content when the user presses escape (#27). But I'm not able to fill the value of the input with my value.
The code is
<input id="escapeInput" value="this is test" /> <input type="button" id="setDetaultToEscapeInput" value="Set default" />
jQuery(document).ready(function() {
jQuery("#escapeInput").keydown(function(evt) {
if (evt.keyCode == 27) {
var input = jQuery(this);
input.val('some default value') // doesn't work
input[0].value = 'some default value 2'; // doesn't work
input.parent().append('changed');
}
});
jQuery("#setDetaultToEscapeInput").click(function() {
var input = jQuery("#escapeInput");
input.val('some default value') // works ok
});
});
The interesting thing is that if I test e.g. for 'A' character ( if (evt.keyCode == 65)), the code works.
Any idea how to handle it? It doesn't work only in FF (Opera and IE8 are OK).

Try using the keyup event instead.
$(function() {
$("#escapeInput").keyup(function(e) {
if (e.keyCode == 27) {
$(this).val("some default value");
}
});
});

Try this
$(document).ready(function () {
$("#escapeInput").keypress(function (evt) {
var keycode = null;
if (evt.keyCode) {
keycode = evt.keyCode;
} else {
keycode = evt.which;
}
if (keycode == 27) {
$(this).val("some default value");
}
});
});