I have a textarea field and it's data will be submitted using java script and ajax by pressing enter key, the problem is that when the user press the enter key first it will create a new line then the textarea will be submitted, and i don't want it to create a new line.
Please help!
Just listen to the keydown event and prevent the default action (which is the linebreak)
$("textarea").on("keydown", function(e) {
if(e.which === 13) { // enter key
e.preventDefault(); // prevents linebreak
// here you could add your submit call
return false;
}
});
You can use jQuery to determine whether the textarea is active:
$("#foo").is(":focus") // expression is true only when it is active
So your code should look something like this:
if (<enter key pressed> and !($("#foo").is(":focus")))
<submit with JavaScript and Ajax>
Related
I have a chrome extension for personal use to change certain websites I visit. One site has a <textarea> which you can type in. There is no submit button. You must press enter for what you typed to be submitted. There are no form tags anywhere either.
<div id="chatRoot">
<div data-reactroot="" class="chat-box-wrap_20_R_" style="min-width: 1180px;">
<div class="chat-box_Wjbn9 faction_2T9gm chat-active_1Sufk">
<div class="chat-box-input_1SBQR ">
<div>
<textarea name="chatbox" maxlength="840" class="chat-box-textarea_2V28W">
</textarea>
</div>
</div>
</div>
<!-- react-empty: 216 -->
</div>
</div>
I have tried creating a keyboard event and dispatching that with the enter key code, and while I believe it worked, it was rejected as an 'untrusted keypress.'
How do I submit data to a textarea that has no form tags, no submit buttons, which only accepts the ENTER button as a valid form of submission, using vanilla javascript?
*I do not want to have to push the enter button. I want my chrome extension to automatically input data into the textarea (which I have no problems with), and then have my chrome extension automatically submit the data it inputted (which is where my problem lies).
Thank you.
The following should work. You just have to make 1 modification to your current code: You must add an id to your text area. If you copy the code that's included then you can do this.
There is another issue that this does workaround. If you press enter, it starts a new line. This doesn't work. If you just press enter, it will submit the message. With this, if you press shift+enter, then it will start a new line. If you just press enter, then it will submit it! This means that you can submit multi-line messages and submit the messages with the enter key.
A detailed walk-through of everything that's happening in the code is included in the form of comments.
// get the chatbox and set the default value for if the shift key and enter key was pressed
var chatbox = document.getElementById("chatbox_main"), shiftPressed = false, enterPressed = false;
// listen for the user to press a key
chatbox.addEventListener("keydown", function(e) {
// check if the shift key was pressed and say if it was
if (e.shiftKey) shiftPressed = true;
// check if the enter key was pressed
if (e.keyCode == 13) {
// prevent the enter key from putting in a new line. If shift it pressed, it will be manually added later
e.preventDefault();
// say that the enter key was pressed
enterPressed = true;
}
});
// listen for the user to let go of a key
chatbox.addEventListener("keyup", function(e) {
// check if the shift key or enter key was released
if (e.shiftKey || e.keyCode == 13) {
// check if the enter key was pressed, and if it wasn't, then reset the shift pressed value because it was only shift that was pressed
if (!enterPressed) shiftPressed = false;
// enter was pressed, so move on
else {
// make sure that shift wasn't pressed along with enter
if (!shiftPressed) {
// get the input from the chatbox and define if the chatbox should be cleared
var input = chatbox.value;
// prevent the enter key from being typed into the chatbox
e.preventDefault();
// run you custom code here!
alert("You submitted this:\n" + input);
// clear the chatbox
chatbox.value = "";
// reset the value
enterPressed = false;
// shift and enter was pressed, so move on
} else {
// shift + enter was pressed, so put in a new line
chatbox.value += "\n";
// reset the values and let the enter key get pressed
enterPressed = false, shiftPressed = false;
}
}
}
});
<textarea name="chatbox" maxlength="840" class="chat-box-textarea_2V28W" id="chatbox_main"></textarea>
I have a input field where when the user types in something, a list of options shows up underneath and the user will click on one of the options. The user can also press the Enter key as well. However, if the user were to enter something that is not in the dropdown that pops up and presses enter, my app crashes. I'm wondering if there is a way where I can disable the enter key on the input field so that when someone tries to press it, it just won't do anything.
Note that is in React as well!
Any help would be appreciated!
Thanks!
You can use onKeyDown event of the input field. You can call some method like below,
const onKeyDown = (event) => {
if (event.keyCode === 13) { //13 is the key code for Enter
event.preventDefault()
//Here you can even write the logic to select the value from the drop down or something.
}
You probably need event.preventDefault() method inside input change method.
Something like:
inputChange = event => {
if (event.target.key === 'Enter') {
event.preventDefault();
}
}
How can I mimic pressing the enter button from within a <input>, using jQuery?
In other words, when a <input> (type text) is in focus and you press enter, a certain event is triggered. How can I trigger that event with jQuery?
There is no form being submitted, so .submit() won't work
EDIT
Okay, please listen carefully, because my question is being misinterpreted. I do NOT want to trigger events WHEN the enter button is pressed in textbox. I want to simulate the enter button being pressed inside the textbox, and trigger this from jQuery, from $(document).ready. So no method involving on.('keypress')... or stuff like that is what I'm looking for.
Use keypress then check the keycode
Try this
$('input').on('keypress', function(e) {
var code = e.keyCode || e.which;
if(code==13){
// Enter pressed... do anything here...
}
});
OR
e = jQuery.Event("keypress")
e.which = 13 //choose the one you want
$("#test").keypress(function(){
alert('keypress triggered')
}).trigger(e)
DEMO
Try this:
$('input').trigger(
jQuery.Event('keydown', { which: 13 })
);
try using .trigger() .Docs are here
Instead of using {which:13} try using {keyCode:13}.
$('input').trigger(jQuery.Event('keydown', {keyCode:13}));
I have a form that I use JQuery, I don't think I need to put code in this post, the question is pretty basic.
But I would like to block the form from submitting when people press the Enter Key or the Return Key.
At the same time, I have textareas, where the user will need to be able to press the Enter / Return keys.
A quick and nasty hack but generally more reliable than trying to block keypresses in every field: add:
<input type="submit" onclick="return false;" />
at the top of the form. The first submit in a form acts as a default button for when Enter is pressed in current browsers, so by neutering it you prevent an Enter-submission from occurring.
Then use CSS to hide and/or move the button so it can't be seen.
It isn't always a good idea to block Enter-submissions though; it's the standard way the browser is expected to work and some users really do want it.
set a flag at the document level, submitform = false;
validate submissions against this.
change the flag in the onclick handler of the submit button.
Couldn't you add an onsubmit attribute to the form, then check if it was submitted using the enter key?
You could try this
jQuery(document).ready(function(){
validSubmit = false;
})
jQuery('myForm textarea').keypress(function(e) {
if (e.which == 13) {
validSubmit = true; // if the pressed key is enter, then allow submissions
}
})
jQuery('myForm').submit(function(){
if (!validSubmit) {
return false; //if submitting the form is not allowed, then cancel submission
}
})
This cancels all submissions whatsoever unless the enter/return key is pressed on a textarea. If you are using a button, you need to add a function to that too.
jQuery('form button.validSubmit').click(function(){ //or 'form input[type="submit"]'
validSubmission = true;
})
I have 25 components which includes [textarea, textfile, radio, combo, etc...] and I have written a key event so that when "ENTER" is entered, I call a function which will submit the page.
Now my page is getting submitted when I press enter, even in the textarea which should not be. So is there any way that I can not submit the page if it is pressed in the text area?
This happens only in IE7 and IE8; it works properly in all the other browser.
you could probably detect if any of the textarea, etc is not filled out/emtpy/unset. if all of them are filled out properly, send the form.
Did you attach the "key event" to the whole form? The whole DOM? if you did that's a normal behavior.
If you want the "Enter key" to submit the page when the focus is on the submit button then apply this functionality in the onsubmit event - there of course you can perform all the validation you need.
If you just want to exclude the enter key event from the text area - perform a simple check if the the focus is in the textarea that momemnt.
The default behaviour of a form is to submit if the user hits enter inside the form unless the focus is on a textarea, so what you want is the default behaviour. Remove whatever code you have that currently handles keypresses for the form and you'll have what you want.
I'm not sure if this will suit your needs, but you can disable the enter key inside the textarea with something like this:
$(document).ready(function(){
$('textarea').keypress(function(e){
var key = (window.event) ? e.keyCode : e.which;
if ( key == 13 ) {
return false;
} else {
return true;
}
})
})