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>
Related
edit: I want to use the enter key to clear the text box after I have already typed some text. Sorry for the confusion I have caused
edit 2 The missing event parameter was the key of all this. Sorry, I am a failure as a programmer.
I want to disable the new line/break when I press enter. However, version 1 doesn't work as I won't be able to enter any text at all.
Version 2 works and I am still able to clear the field while continue entering new texts.
From how I interpret this, whether I press the shift key + enter together or not, it should still allow me to type. Why is there such a difference? How does the default option of shift key relate to enabling/disabling input on the textbox? What I would like to do, is to just disable the new line/break when pressing the enter button but I found that it disabled the input part as well, which from my understanding, it shouldn't?
// html
<textarea type="text" id="box">Some text</textarea>
// javascript
document.getElementById('box').addEventListener('keypress', (e)=>{
//version 1
if(e.keyCode == 13){ //why does this version also disable any text input?
e.preventDefault();
document.getElementById('box').value = '';
}
//version 2
if(e.keyCode == 13 && e.shiftKey){
e.preventDefault();
document.getElementById('box').value = '';
}
});
Your code is throwing an error because it doesn't know what the variable e is referring to. You should see that error if you watch the error console. To fix it, you should pass that in to the function. This clears the textbook when you press enter. Is that what you want? I left the line in but commented it out.
document.getElementById('box').addEventListener('keypress', (e)=>{
//version 1
if(e.keyCode == 13){ //why does this version also disable any text input?
e.preventDefault();
document.getElementById('box').value = '';
}
});
<textarea type="text" id="box">Some text</textarea>
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>
I have a text input field referred to as $nameEditor. I want to show this text field when a button is pressed, and hide it on blur or when the escape key is pressed.
Hiding the field on blur works every time.
Hiding the field when pressing the escape key works only the first time. Example sequence of events.
Press the button that shows the text input field.
Press escape - text input field hides
Press the button that shows the text input field again.
Press escape - the keyup event is not triggered
Press any other key and the keyup event is triggered
Press escape - the text input field hides
Relevant markup:
<button id="renameButton" title="Rename" data-icon="ui-icon-pencil">Rename</button>
<span id="assemblyNameView">Assembly Name</span>
<input id="assemblyNameEditor" style="display:none" class="ui-corner-all widget">
Relevant script:
var $renameButton = $("#renameButton");
var $nameViewer = $('#assemblyNameView');
var $nameEditor = $('#assemblyNameEditor');
function cancelEdit() {
$nameEditor.hide();
$nameViewer.show();
}
function initEdit() {
$nameViewer.hide();
$nameEditor.val($nameViewer.text()).show().select();
}
function commitEdit(newName) {
// TODO: Update the structure being edited.
$nameEditor.hide();
$nameViewer.text(newName);
$nameViewer.show();
}
$renameButton.click(initEdit);
$nameEditor.blur(cancelEdit);
$nameEditor.keyup(function(e) {
console.log(e);
if (e.keyCode === 13) {
var newName = val();
if (newName === '') {
alert("No name specified.");
$nameEditor.val($nameViewer.text()).select();
e.preventDefault();
return false;
}
commitEdit(newName);
}
else if (e.keyCode === 27) {
cancelEdit();
}
});
Why is the escape key not triggering the keyup event after the input box has been hidden then re-shown?
It's hard to explain what's wrong here. There is a strange effect when both the button and the textbox receive focus? It's impossible in a standard UI interface. In fact when you type keys other than ESC, Enter, Space and maybe more ... the typed characters are shown OK in the textbox and only the textbox receives focus after that. However if you type ESC, Enter, Space... the keystrokes seem to affect on the button and I can even see there is some color effect on the button showing that it's currently focused. This looks like a bug indeed.
However to solve this, I tried using focus() explicitly appended after .select() and it works OK.
function initEdit() {
$nameViewer.hide();
$nameEditor.val($nameViewer.text()).show().select().focus();
}
Demo.
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;
}
})
})