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;
}
Related
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();
}
});
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.
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();
}
});
I have this CSS3 enter button
here:
If you click it, it seems like it's pressed. I want to achieve the same effect (probably using jQuery), by pressing the enter key physically on my keyboard.
I did something like this: (sorry if it's completely wrong, I don't do jQuery at all)
<script type="text/javascript">
$(document).ready(function(){
$("enter").keypress(function(event){
if(event.keyCode == 13){
$(this).toggleClass(".button-clicked");
}
});
});
</script>
The CSS selector for the unpressed button is:
.button and .button.orange {}
The CSS selector for the pressed button is:
.button:active, .button-clicked {}
Thanks for your help!
I haven't tested this, but I think you should be able to do something like
I have just tested this (and linked to a demo, below the jQuery), and it works pretty well:
$('body').keydown(
function(e){
if (e.which == 13) { // enter
$('buttonSelector').addClass('button-clicked');
}
}).keyup(
function(e){
if (e.which == 13) { // enter
$('buttonSelector').removeClass('button-clicked');
}
});
JS Fiddle demo.
With this the keydown causes the button to appear pressed so long as the enter key is pressed, and, on release, triggers the keyup() handler, changing the style of the button so as to appear un-clicked.
Refined the above, somewhat, using on(), though having to use an if/else if statement to check the function type:
$('body').on('keydown keyup', function(e) {
if (e.type == 'keydown') {
if (e.which == 13) { // enter
$('#button').addClass('button-clicked');
}
}
else if (e.type == 'keyup') {
if (e.which == 13) { // enter
$('#button').removeClass('button-clicked');
}
}
});
JS Fiddle demo.
References:
keydown().
keyup().
addClass().
removeClass().
on().
You are trying to apply the keypress to an <enter></enter> element (which doesn't exist), try doing this:
<script type="text/javascript">
$(document).ready(function(){
$("body").keypress(function(event){
if(event.keyCode == 13){
$(".button").toggleClass("button-clicked");
}
});
});
</script>
Close but how about this:
//bind to the `keydown` event when the `document` is focused
$(document).on('keydown', function (event) {
//if enter is pressed
if (event.keyCode == 13) {
//add the `.button-clicked` class to any element with the `.button` class
$('.button').addClass('button-clicked');
}
}).on('keyup', function (event) {
if (event.keyCode == 13) {
$('.button').removeClass('button-clicked');
}
});
Here is a jsfiddle: http://jsfiddle.net/jasper/T5yEu/2/
Notice that I added !important to the .button-clicked class on several of the rules to make sure they are added to the element.
I'm trying to change the focus whenever a user presses tab on the last field. I want to set the focus on to another input field.
I have the following javascript code:
$("#input2").keydown(
function()
{
if(event.which == 9)
{
$("#input1").focus();
}
}
);
And this is my trial html code:
<div id="inputArea1">
<input id="input1" />
<input id="input2" />
</div>
It seems to work with keyup (the changing the focus part) but then again I don't get what I want with keyup..
What am I missing?
You need to stop the event, by returning false. If you do not, the basic browser event is fired after you switched to input1, which means the focus is back at input2.
For example:
$("#input2").keydown(function(e){
if(e.which == 9){
$("#input1").focus();
return false;
}
});
Yes, those guys get to it before me.
Another jQuery way is to use event.preventDefault()
$("#input2").keydown(
function()
{
if(event.which == 9)
{
event.preventDefault();
$("#input1").focus();
}
}
);
Live example:
http://jsfiddle.net/ebGZc/1/
You probably need to cancel the default handling of the event by the browser by returning false from your keydown handler, like this (live example):
$("#input2").keydown(
function(event)
{
if(event.which == 9)
{
$("#input1").focus();
return false;
}
}
);