I have a textarea that I submit while pressing Enter
https://stackblitz.com/edit/angular-uvxifq-uyxteg
<textarea class="message-area" (keyup.enter)="ValidateCommentAndPost(commentErr, $event);" [(ngModel)]="comment" matInput #commentErr="ngModel"></textarea>
I would like to disable the new Line while I press enter, so I took some information on the web and did .
ValidateCommentAndPost(ngComment:NgModel, event?:KeyboardEvent){
event.preventDefault();
if((ngComment.invalid && (ngComment.dirty || ngComment.touched)) && ngComment.errors) {
this.ResetComment();
} else {
this.PostComment();
}
}
But this doesn't work, also, return false; still create a white line.
What can I do?
Add event to capture enter and prevent the default behaviour.
Add the keydown event to your component html
<textarea required
(keydown.enter)="onKeydown($event)" (keyup.enter)="ValidateCommentAndPost(commentErr, $event);" pattern="/^[/\S/]+$/i" [(ngModel)]="value" matInput #commentErr="ngModel"></textarea>
and add this to your component ts file
onKeydown(event){
event.preventDefault();
}
Related
I want to submit an input in React.js by pressing enter without using a form.
It this possible?
It's simple. Just check if Enter pressed, then call your action.
function handleKeyDown(event) {
if (event.key === 'Enter') {
// call action
}
}
<input onKeyDown={handleKeyDown} />
I have several input fields text on my page:
<input type="text">
The form is submitted when I press ENTER in some of them, which is what I don't want.
What can cause such behavior?
I triple checked and I do not have submit buttons (actually I do not have any buttons at all)
You could use a bit of Javascript placed in the head section of your HTML page to disable submission on enter clicked in an input field:
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
You are probably submitting some of your forms via ajax calls in which you prevent the default browser behavior. That is why some of your forms are not submitted when you hit the enter.
To make sure all of your forms do not submit when enter is pressed, you can bind a custom function to all of your forms which detects when enter key is pressed. In this function you can prevent the default browser behavior.
$('form').keydown(function(e){
if(e.keyCode === 13) {
e.preventDefault();
return false;
}
});
Example Fiddle here.
I need a simple code to disable the button to send the form to the following conditions:
If the selected <input type="radio"> with ID "#radio_one" and then check only one <input type="text"> with ID "#text_one".
OR
If the selected <input type="radio"> with ID "# radio_two" and then check two <input type="text"> with ID "#text_one" and also with ID "#text_two".
And, if provided with one or two <input type="text"> will be empty, add for a button <input type="send"> attribute disabled="disabled" if, however, will once again fill this attribute is removed from the button.
Sorry for my English, I used Google Translator: (
I dont have another code, I hope you understand me, so I created some simple jQuery code which can then possibly edit.
Thanks
Edit: This does not work:
$("#send_button").attr("disabled", "disabled");
if ($('#absence_one').checked && $('#cal_from').val().length > 0) {
$("#send_button").removeAttr("disabled");
}
if ($('#absence_more').checked && $('#cal_to').val().length > 0) {
$("#send_button").removeAttr("disabled");
}
Check out my example here jsfiddle.
I put a click listener on the radio to make it check to either disable or undisable the button
I put a keyup listener on the text input to make it check to either disable or undisable the button
EDIT
I made a slight change to the example here's the new one jsfiddle.
Also be sure you are double checking a submit on the server side. If someone disables javascript the button will be available for clicking.
$("#send_button").attr("disabled", "disabled");
$("input[type='radio']").change(function()
{
checkButton();
});
$("input[type='text']").keyup(function()
{
checkButton();
});
function checkButton()
{
if (($('#absence_one').is(":checked") && $('#cal_from').val().length > 0) || ($('#absence_more').is(":checked") && $('#cal_to').val().length > 0)) {
$("#send_button").removeAttr("disabled");
}
else
{
$("#send_button").attr("disabled", "disabled");
}
}
If I understand, you want to disable the submit button if either pair of radio button/textbox are unfulfilled. If so:
$("input[type=submit]").attr("disabled", "disabled");
if ($('#radio_one').checked && $('#text_one').val().length > 0) {
$("input[type=submit]").removeAttr("disabled");
}
if ($('#radio_two').checked && $('#text_two').val().length > 0) {
$("input[type=submit]").removeAttr("disabled");
}
I just want to ask how can I stop my html textbox from refreshing when I press enter.
<div id="topSearchBox">
<input id="Text1" type="text" value="search..."/>
<img id="topSearchBoxIcon" alt="search buttom" src="~Images/Search-32x32.png" width="18px" height="18px" />
</div>
I have a script that tells it to do some thing else, but after the script has completed it refreshes the page anyway.
$(document).keyup(function (e) {
if (e.keyCode == 13) { // enter
Search();
}
});
I've read a bit on it, but nothing seems to work.
$(document).keyup(function (e) {
if (e.keyCode == 13) { // enter
Search();
return false; //you can also say e.preventDefault();
}
});
If I well understood, maybe the page refresh because you may have a submit input (or button) after to the input text field so when you hit the enter key you also send the form itself.
try to stop the propagation of the event with
$(document).keyup(function (e) {
if (e.keyCode == 13) { // enter
e.stopPropagation();
Search();
}
})
Return false in the event to stop the default event (submit) taking place. This is assuming that the submit event is being triggered.
$(document).keyup(function (e) {
if (e.keyCode == 13) { // enter
Search();
return false; //this will stop the default event triggering
}
});
You could also put it outside of a form (if it's inside).
Note - Also, it's better if you bound the event to your input directly.
$('#Text1').keyup();
I have answered it here. https://stackoverflow.com/a/16016122/1047337
It's about having only one text box in the form.
I have a form with several submit buttons. I want my last button to handle the submit rather than the HTML5 spec'ed first button.
I can't change the html at this point and am fairly sure this requires JS. But when I've given it a shot I've gotten into nasty loops or dead code trying to prevent default behaviour and then fire my other button.
Has anyone done this before? jQuery is on the page if needed.
Thanks,
Denis
Since you mentioned jQuery :)
If all you want to do is submit your form when a user presses the enter key, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('#myForm').submit();
}
});
});
However, if you have different behavior/forms depending on which button is clicked and you want the enter key to trigger your last button's click event, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('input[type="submit"]:last').click();
}
});
});
You should just change the input element's type attribute to button instead when you don't want it to submit the form. (I know you said you can't really change the HTML, but this is the best way)
<input type="button" name="mybutton" class="submit-button" value="I wont submit!" />
jQuery code:
$('.submit-button').click(function() {
$('#secret-value-field').val($(this).val());
$(this).parents('form').submit();
});
Or something along those lines.