We Keep Coding

How to set event listenet for 'Enter' key in textarea with js [duplicate]

This is meant to allow a user to type in a message and then press enter to send it. This should clear the box so that the user can type in a new message. The problem is that the standard result of pressing enter (creation of a newline) is occurring after the .empty() event....so the text vanishes and is replaced by a newline, which is quite undesirable. How can I circumvent this?
$('#messagebox').keypress(function(event) {
if (event.keyCode == '13') {
send();
$('#messagebox').empty();
}
});

You can prevent the default action of the keypress via event.preventDefault() (or return false from your event handler function, which is jQuery shorthand for preventDefault + stopPropagation):
Live example | source:
HTML:
<p>Pressing Enter will clear the text area below:</p>
<textarea id="messagebox" rows="10" cols="50"></textarea>
JavaScript:
jQuery(function($) {
$("#messagebox").focus().keypress(function(event) {
if (event.keyCode === 13) {
$(this).val("");
event.preventDefault();
}
});
});
FWIW, I'd probably use val with an empty string rather than empty to clear the textarea, since val is specifically for setting the value of form fields — but if empty() is working for you...

$('#messagebox').keypress(function(event) {
if (event.keyCode == '13') {
event.preventDefault();
send();
$(this).empty();
}
});

demo
$('#messagebox').on('keydown',function(e) {
if (e.which === 13) {
send();
$(this).val('');
e.preventDefault();
}
});

disable the "enter" key in a form if the field is not valid

how to disable the "enter" key who give us the possibility to valid and send the form if the field is not valid ?
I only did the first part, which indicates that the field is not valid, but the "enter" key is always active . So my question is simple, how to disable the "enter" key button from the moment we see the "error-message" under the field
here is my test page ->
http://500milligrammes.com/facticemagazine/final/unsubscribe/

I've checked your website, to achieve what you asked for:
$("#name").on("keydown", function(e) {
if(e.which === 13 && $("#name").next(".error-message").is(":visible")) {
e.preventDefault();
return false;
}
});
The submit is always send on keydown, so we need to add a keydown event handler.
Next is to check if the key was the enter key e.which === 13 and after that we just need to check if the error message is shown or not $("#name").next(".error-message").is(":visible").
If both conditions are true then just prevent the default action (submit) by calling e.preventDefault();
You can further improve this by also checking if the input is empty or not before accepting the enter key. The first keydown might be the enter key.
$("#name").on("keydown", function(e) {
if(e.which === 13) {
if($("#name").next(".error-message").is(":visible") || !$("#name").val()) {
e.preventDefault();
return false;
}
}
});

You can check it using the keycode value (13) of enter key.
Something like the following should do:
$('form').on('keyup keypress', function(e) {
if (e.which == 13) {
if (!isValid()) { // your validation function
e.preventDefault();
return false;
} else {
$(this).submit();
}
}
});

Try adding this when you show the error:
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.which == 13) {
e.preventDefault();
return false;`enter code here`
}
});

how to make textarea not start a new line?

how to make to make textareas not start a new line each time I click on enter I need to do this with javascript not Jquery
event.prevent Default();
so I need an alternative
Thankyou

You can try this :
function preventEnter(evt) {
if(evt.Which == 13){
evt.preventDefault();
}
}
document.getElementById('my-textarea').addEventListener(
'keypress', preventEnter, false
);

Well you want to prevent the default action of 'enter' on the textarea so :
HTML code:
<textarea id="textarea" onkeyup="function()"></textarea>
Javascript code:
document.getElementById('textarea').onkeypress = function(e) {
if(e.which== 13){
e.preventDefault();
}
};
jQuery:
$('textarea').keyup(function(e){
if(e.Which == 13){
e.preventDefault();
}
});
The "e.which == 13" checks if enter is pressed, and prevents the default action (which was previously a carriage return).

use css resize
textarea {
resize: none;
}

Jquery how to split blur and enter key

I want to split blur and enter key functions. So I mean that I want jquery to do another function on blur and another on enter key. If enter key was clicked then blur mustn't work, so blur function mustn't execute. This is my jquery code :
$(document).ready(function(){
$("#comment_textarea").on("keypress blur", function(e) {
if(e.type == "keypress" & e.which == 13){
alert("type: "+e.type+"||which: "+e.which);
}
else if(e.type != "keypress" ){
alert("type: "+e.type+"||which: "+e.keycode);
}
});
})
This code alerts two times. First is blur and second is enter click. Have anyone got any ideas.
Thanks.

Since you show an alert the textarea isn't focused anymore, the blur event will be triggered then.

$(function () {
$("#comment_textarea").on("keydown", function (e) {
if (e.keyCode == 13) {
// do your Enter key stuff
e.preventDefault();
}
});
$("#comment_textarea").on("blur", function (e) {
// handle the blur
});
});
Trying to double up probably isn't the best way.

Alert when backspace is pressed inside textbox

I have a grid with three read-only columns. Whenever user goes in there and try to edit by pressing backspace, I need to alert by giving a message. I am using this script and it doesn't work? Can anyone correct me?
$(document).ready(function () {
$('#txtCode').bind('keypress', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}
});

instead of keypress try with keyup or keydown with .on() method:
$('#txtCode').on('keyup keydown', function (e) {
You can bind multiple events like this too.
and one more thing closing of $('#txtCode') seems to be missing });
$(document).ready(function () {
$('#txtCode').on('keyup keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}); //<----");" this is the closing you misssed this
});
See the fiddle in action

If this is all the code you are testing, you weren't closing the function properly, annotated in my posted code. Also use keyup instead of keypress
$(document).ready(function () {
$('#txtCode').bind('keyup', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
}); /*<-- You weren't closing your function properly*/
});
Fiddle
You do indeed need to add a return false statement to ensure the character doesn't get deleted anyway. I also took it a step further and extended jQuery with a preventKeyUsage method.
$(document).ready(function () {
$.fn.preventKeyUsage = function (key, message) {
return this.each(function () {
$(this).on('keydown', function (e) {
return (e.keyCode === key) ? (function () {
alert(message);
return false;
})() : true;
});
});
};
$('#txtCode').preventKeyUsage(8, 'The column is read-only and is not editable');
});
New Fiddle

Working code is:
Java Script Code:
$(document).ready(function () {
$('#txtCode').bind('keypress keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});

Here is the updated code
<input type="text" id="txtCode" />
$(document).ready(function () {
$('#txtCode').bind('keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
return false;
}
});
});
Fiddle Demo

Try this
$(document).ready(function () {
$('#txtCode').on('keyup', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});
DEMO (Working on Firefox & Chrome)

$('#textbox').keydown(function(event){
if(event.keyCode == 8){
alert("Backspace not allowed..");
return false;
}
});
http://jsfiddle.net/xF9jL/1/

You are missing }); of keypress. google chrome have issues with keypress, u can try keydown instead
$(document).ready(function () {
$('#txtCode').bind('keydown', function (e) {
if (e.which == 8) {
alert('The column is read-only and is not editable');
}
});
});
To use delete ,arrows, backspace keys in Chrome you must use keydown. keypress on these keys work only in Firefox and Opera.
DEMO

You can probably solve the underlying issue by either not using an element that accepts input, or by using the disabled attribute:
<textarea name="example" disabled>Some text</textarea>
If you are posting back to the sever, you should assume the user has edited the field, no matter what you do to prevent it.

keypress event won't give keycodes for all keys in all browsers . Better use keyup or keydown event which gives keycode for all keys in all browsers
In order to understand the difference between keydown and keypress, it is useful to understand the difference between a "character" and a "key". A "key" is a physical button on the computer's keyboard while a "character" is a symbol typed by pressing a button. In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers.