I want restrict the space in empty text box and text-area box below Code is not working in mobile its working in desktop please check and help on this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input[type=text],textarea").keypress(function(e) {
if(e.which === 32 && !this.value.length) {
return e.which !== 32;
}
});
});
</script>
</head>
<input type="text" maxlength='25'>
<textarea></textarea>
</html>
Your selector will cancel the spacebar in ALL textboxes and textareas on your page. Are you sure?
If you are, then you can use the keydown event, and event.preventDefault() to cancel the space bar.
$("input[type=text],textarea").keydown(function(event) {
if (event.keyCode == '32') {
event.preventDefault();
}
});
Related
I'm writing a simple web site and would like to run some simple javascript when the user presses a button on their keyboard. Something as simple as running alert("Hello!"); or showing a modal box when the user presses enter would do.
After searching for a good while, I've only been able to find solutions that work if the page contains an input text field. Is it possible without it?
Yes, it is possible to do so, and here's how you'd do it:
document.body.addEventListener("keydown", function(event) {
if (event.keyCode == 13) {
alert("Hello! You pressed the enter key!");
}
});
Yes, you can actually use eventListener for this. For example, check out this sample page.
<html>
<body>
<script>
document.addEventListener("keypress", function(event) {
if (event.keyCode == 13) {
alert('You just hit enter.');
}else if(event.keyCode ==65){
alert('You just press A.');
}else if(event.keyCode==97){
alert('You just hit a.');
}else{
alert('You press something other than A, a and ENTER key');
}
})
</script>
</body>
</html>
In order to get the keycode for the various keypress you can use this:
<html>
<body>
<p>Press a key on the keyboard in the input field to get the KeyCode for that key.</p>
<input type="text" size="40" onkeypress="getKeyCode(event)">
<p id="keyCode"></p>
<script>
function getKeyCode(event) {
var x = event.which || event.keyCode;
document.getElementById("keyCode").innerHTML = "The keyCode is: " + x;
}
</script>
</body>
</html>
I have a problem with the tab function where the tab key moves my regform slide when pressed a couple of times. How can I disable the tab for the regform area only.
Here's my html
https://jsfiddle.net/tbtt86u5/
I've seen this link but it's not working on my situation. The tab is still working on the form where it slides every element.
I also tried using tabindex but it doesn't work on my side. The elements of the form is still sliding using tab.
<script>
$('.steps').keydown(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
console.log(code);
if (code == 0 || code == 9) {
e.preventDefault();
}
});
</script>
I appreciate your help!
document.querySelector('input').addEventListener('keydown', function (e) {
if (e.which == 9) {
e.preventDefault();
}
});
First Name:<input type='text' />
<br/>
Last Name:<input type='text' />
Hello I have this link for example
<a href"http://google.es">Link</a>
Is there any way using Javascript or similar that when I press for example the number 5 in the keyboard It´s the same as if I press the link with the mouse?
Thanks
you can use jQuery
$( document ).keypress(function( event ) {
event.charCode == 53 ? window.open("google.es","_self") : console.log('another key');
});
You can bind keypress event and sniff out the event.which and when the appropriate key is pressed you can programmatically click the a or link element.
Check this CodePen for the example.
Note: This example is using jQuery plugin.
Try this. Using jQuery.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function checkKey(e) {
var code;
if (e.keyCode) code = e.keyCode;
if (code == 53) { // replace the 53 with the keycode of your choice.
$('#myLink').trigger("click");
}
}
</script>
</head>
<body onkeydown="checkKey(event);">
<button id="myLink" onclick="window.location.href= 'https://google.com'">Link</button>
</body>
</html>
Keycode reference: http://www.foreui.com/articles/Key_Code_Table.htm
you can use the key press event in jquery
$(function() {
$(document).keypress(function(e) {
if (e.which === 53){
location.href = "http://google.es";
}
});
});
this is for the key 5 if you want to change key give asci value for that key
I have an input text, and when you press enter, it's suppose to make the input text uneditable, before making it editable again in 3 seconds. But it's not working for some reason. What am I doing wrong? Thanks.
<input type = "text" id = "text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(function(){
$("#text").keyup(function(e){
if (e.which == 13) {
$("#text").prop("readonly", true);
setTimeout(function(){
$("#text").prop("readonly", false);
}, 3000);
}); //end of if (e.which == 13)
}); //end of $(function())
</script>
Simple typo in if closing , there is an additional parenthesis remove it
$(function() {
$("#text").keyup(function(e) {
if (e.which == 13) {
$("#text").prop("readonly", true);
setTimeout(function() {
$("#text").prop("readonly", false);
}, 3000);
} //end of if (e.which == 13)
//-^--- remove ) from here
}); //end of $(function())
});
// also add this closing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text">
depending on your jquery version on of the following will work:
$("#text").attr('readonly', true); //this work for older jquery version
or
$("#text").prop('readonly', true); //for new jquery version
for removing readonly attribute you can use removeAttr()
$("#text").removeAttr('readonly');
After reading this post here in Stackoverflow, (Detect the Enter key in an text input field) I tried to make a few of my inputs fire on enter... I did not work. I made a simple example and it still doesn't work. Can someone hint as to the proper way? (FYI - Definitely a newbie here)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>On Enter</title>
<script src="../../Scripts/jquery-2.1.0.min.js"></script>
<script>
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
</script>
</head>
<body>
<input type="text"
id="input1"
placeholder="Press Enter When Done">
</input>
</body>
</html>
Thanks
First you need to say #input1 other than .input1, then run it when the entire DOM is ready:
$(document).ready(function(){
$("#input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
});
Edit: As #jfriend00 mentioned in a comment it's a good idea to use e.which other than e.keycode. To do so you can change: e.keyCode == 13 to e.which == 13. This way is recommenced by the people at jQuery, as it normalizes e.keyCode and e.charCode.
Change the .input1 in your JS to #input1
When you use . it means it's a class, but you have an ID, which is #.
Your code is triggering a "class", not an "id", so add a "#" instead of a "." in input1:
$("#input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
first, like the previous answer your criteria is not good. change for ID
second, put your javascript at the and of the file on in the ready document.
Because the javascript is in execution while the documenta as not finish to load . So the event can't be add to an element that doesnt exist.