AJAX chat submission only working with $(document).keypress() - javascript

There's an input field for my ajax chat which should send data on enter press.
$("#chatfield").keypress(function(e) {
if(e.which == 13) {
chatsend($('#chatfield').val());
}
});
The code above won't work, only
$(document).keypress(function(e) {
if(e.which == 13) {
chatsend($('#chatfield').val());
}
});
But I don't want the code to listen the whole document for keypress event.
The input field has an id although it is not wrapped in a form element.

The short answer is to delegate.
$(document).on('keypress', '#chatfield', function(e) {
if(e.which == 13) {
chatsend($('#chatfield').val());
}
});

Related

Capture keyDown for current page only

I have forms on different pages of my applications. Upon pressing 'Enter' or 'Esc', the form on the current page must be 'Submitted' or 'Cancelled'. The keydown() function should be triggered anywhere on the page and not tied to a specific DOM element.
.js
$(document).keydown(function(e) {
if(e.which == 13) {
// enter pressed
$('#submitCreateAccountForm').click();
$('#submitForm').click();
$('#submitNewSubmissionForm').click();
}
if(e.which == 27) {
// esc pressed
$('#submitCreateAccountFormCancel').click();
$('#submitFormCancel').click();
$('#submitNewSubmissionFormCancel').click();
}
});
What should 'document' be replaced by? Thanks
try this
$(function(){
$('html').bind('keypress', function (e) {
if (e.keyCode == 13) {
//do somethings
}
else if (e.keyCode == 27) {
return false;
}
});
});
You can try this code:
$("body").keyup(function(event){ // bind keyup event to body
if(event.keyCode == 13){ // 13 - code of enter key (find for ESC)
$("#enter").click(); // bind enter press for clicking botton with id="enter" and corresponding actions
}
});

Run Search on keypress

So I have this API call to Wikipedia which works on button click, but I want to search it on enter press as well. I have tried something like this but got stuck..any help appreciated.
$('#search').keydown(function (e) {
if (e.which == 13) {
$("#searchTerm").click();
}
})
Here's the fiddle:
https://jsfiddle.net/ut88e0y3/
Instead of listen each keypress, you can use <form> element and submit event. Check this fiddle.
you should use keypress with the document like this:
$(document).keypress(function(e) {
if(e.which == 13) {
if($('#search').is(':focus')){
$('#searchTerm').click();
}
}
});
see your example after edit here: https://jsfiddle.net/IA7medd/7j6h1jv7/
You should attach the event to the <input>, not to the <button>.
$('#searchTerm').keydown(function (e) {
if (e.which == 13) {
$("#search").click();
}
});
Or, if you prefer attaching to the document:
$(document).on('keydown', '#searchTerm', function (e) {
if (e.which == 13) {
$("#search").click();
}
});
See: https://jsfiddle.net/tbnexLd8/

don't can use Enter key from textarea

In my project I need diable Enter key for some textbox , because i don't want post page when enter key button . I use this Code for disable Enter key :
$(document).keypress(
function (event) {
if (event.which == '13') {
event.preventDefault();
}
});
Its work fine , but when Add textarea in page , I cant enter key for break line , because Enter key disabled .
how can I enable Enter key for textarea?
I don't know if its recommended to attach a global keypress handler like that. Regardless, the easiest way out would be
$(document).on('keypress',
function (event) {
if (event.which == '13' && event.target.tagName != 'TEXTAREA') {
event.preventDefault();
}
});
In the above, you are checking the tagName of event.target to see if the element in which the enter occured is a textarea or not
However, I would recommend this approach
$('form').on('keypress', 'form',
function (event) {
if (event.which == '13') {
event.preventDefault();
}
});
This will target all input elements and not textarea elements,
You should bind your form to detect the Enter key as,
$('#formid').on("keyup keypress", function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
Here is a demo
By this you will be able to use the Enter key on your text area without submitting the form.

Textarea enter keypress not working because of form submit enter prevention

I have a form in which I've used the following code to prevent the form being submitted on the press of 'Enter'.
<script>
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
As a result, the 'Enter' key is not working in any textarea input. I can't enter a new line because of the body function. How do I solve this?
<textarea name='description' placeholder="Any other information (optional)"</textarea>
I have find solution.
You prevent enter key on all the form element. Just add some tweak to your code and its done. Just skip prevention of enter key when your focus is on textarea. See below code :
$(document).ready(function() {
$(window).keydown(function(event){
if(event.target.tagName != 'TEXTAREA') {
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
}
});
});
To prevent the form from submitting, try this instead:
$("form").submit(function(e){
e.preventDefault();
}

jQuery disabling submit-by-press on keyboard

I want to disable the "Enter" button on the keyboard so that when the user press enter to submit the form, nothing happens, and doing something else rather than submitting the form, such as alerting "Using keyboard is not allowed."
Here is what I have done, #calculator is a button:
$(document).ready(function(){
$("#calculator").keydown(function(){
console.log("Enter is disabled.");
return false;
});
});
Currently on its submission the form results unexpectedly (for instance redirects to the target page but without any CSS loaded.
$(document).on('keypress', function(e){
if(e.which == 13) {
e.preventDefault();
}
});
You can use .keypress() event to check which key was pressed then check the code of the key using e.keycode or e.which, if it's 13 then prevent submitting form:
$(document).keypress(function(e){
var code = e.keyCode || e.which;
if (code == 13 ) {
e.preventDefault();
return false;
}
});
For it, don't use submit button.
Use a div, style it like a button and submit the form using javascript on click of the div :)
Try this
For Disabling Keyboard
document.onkeydown = function (e) {
alert('Using keyboard is not allowed')
}
For Disabling Enter
$(document).on('keypress', function(e){
if(e.which == 13) {
e.preventDefault();
}
});

Categories

Resources