This code works fine when I map the function to the "Ctrl" key (char code 17). But it submits the page when I change it to the "Enter" key (code 13). Why would this happen?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../utilities/utility.js"></script>
<script>
$(document).ready(function(){
$("#userInput").keyup(function(event){
if(event.keyCode == 17){ // <--- ***** RIGHT HERE *****
processInput();
}
});
flashcards_main();
});
</script>
<script type="text/javascript" src="flashcards.js"></script>
</head>
<body>
<p id="question">The question paragraph.</p>
<p id="sub_question">sub-question</p>
<form name="chloroForm">
<input id="userInput" type="text">
<input id="userSubmitBtn" type="button" value="Submit" onclick="processInput()">
</form>
</body>
</html>
EDIT:
I changed the function below but I get the same problem:
$(document).ready(function(){
$("#userInput").keyup(function(event){
if(event.keyCode == 13){
event.preventDefault();
processInput();
}
});
flashcards_main();
});
You need to use preventDefault() on the event to stop the default behaviour of the key being pressed:. You also need to use the keypress event:
$("#userInput").keypress(function(event){
if (event.keyCode == 17 || event.keyCode == 13) {
event.preventDefault();
processInput();
}
});
Example fiddle
Related
I got a textbox on my form. I want the users to not have the ability to press space in the keyboard. I'm using the code below to disable spacing. I don't understand why it isn't working.
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
<script>
function noSpaces()
{
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
}
</script>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb" onkeydown="noSpaces()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
</script>
</html>
The onkeydown event subscribes to the noSpaces function which then re-subcribes using jquery for input for keydown. Pick one or the other but do not subscribe multiple times because now you add a new subscription with every event call.
Added CDN reference to jquery
$(document).ready(function(){
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
})
I guess this code is enough for you you don't need to define onkeydown="noSpaces()" and noSpaces function
I prefer would use keyup and would solve it like this:
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$("input").on("keyup", function (e)
{
$(this).val($.trim($(this).val()));
});
</script>
You have not included jquery library. You first have to include that and then this will work.
$("input").on("keydown", function (e) {
return e.which !== 32;
});
I am trying to get the value from input box when user hit enter.
i do not need any button.
How can i achieve that
test.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form action="#" method="GET" enctype="multipart/form-data">
<center>
<input name="quan" align="middle" type="text" id="quan" placeholder="quan" title="If You Want Change Quantity Then Type Here" size="4">
</center>
</form>
<script type="text/javascript">
$(document).ready(function(){
var model=$('#quan').val();
console.log(model);
});
</script>
</body>
</html>
Use keyup() or keydown() function. Appending to it, use event.keyCode == 13 for getting the value after hitting enter button.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="#" method="GET" enctype="multipart/form-data">
<center>
<input name="quan" align="middle" type="text" id="quan" placeholder="quan" title="If You Want Change Quantity Then Type Here" size="4">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#quan').keydown(function(event) {
if (event.keyCode == 13) {
var model=$('#quan').val();
alert(model);
// Use this 'model' variable
}
});
});
</script>
</body>
</html>
User's Requirement
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#quan').keydown(function(event) {
if (event.keyCode == 13) {
var model=$('#quan').val();
$.ajax({url:"nextPage.php?model="+model,cache:false,success:function(result){
alert("success");
}});
}
});
});
</script>
nextPage.php (Create a new page. Make sure, your page name matches with the page name given in <script></script>. Both are related.)
<?php
$model = $_GET['model'];
//Now, use this '$model' wherever you want to use in this page.
?>
Success & Error
$.ajax({url:"nextPage.php?model="+model,cache:false,success:function(result){
if(result.status == 'success'){
alert("success");
} else if(result.status == 'error') {
alert("Error");
}
}});
function getVal(ele) {
if(event.keyCode == 13) {
alert(ele.value);
}
}
<input type="text" onkeydown="getVal(this)"/>
<script>
$(document).on('keyup','#quan',function(){
var code = e.keyCode || e.which;
if(code == 13) { //Enter keycode
//Do something
}
});
</script>
like this
$(document).ready(function(){
$('#quan').keyup(function (e){
var model=$(this).val();
if(e.keyCode == 13){
alert(model)
}
})
});
Try this:
<script type="text/javascript">
$( "input" ).keypress(function( event ) {
if ( event.which == 13 ) {
alert($(this).val());
}
});
</script>
you can do something like this
<script type="text/javascript">
$( "input" ).keypress(function( event ) {
if ( event.which == 13 ) {
consol.log($(this).val());
}
});
</script>
where 13 is enter key code when you enter it in keyboard you can see the value in console
$(document).ready(function(){
$('#quan').keyup(function (event) {
if (event.which === 13) {
var model = $(this).val();
console.log(model);
}
});
});
I am trying to get script src="jsmovermap1.js" to change to script src="jsmovermap2.js" when the user clicks UP on their keyboard. I seem to have this working when you look at page elements, but the page is not updating to the js source. Do you have any advice on how to overcome this?
Many thanks!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ireland Map</title>
</head>
<body>
<div id="map">
</div>
<script src="jquery-2.1.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jsmovermap1.js" id="s1"></script>
<script>
x=1;
alert(x);
document.addEventListener('keydown', function (evt) {
if (evt.keyCode === 38) {
alert('The "UP" key is being held down...?');
x=x+1;
alert(x);
s1.src="jsmovermap"+(x)+".js"
//s1.src = s1.src.replace("jsmovermap1.js","jsmovermap"+(x)+".js");
}
if (evt.keyCode === 40) {
alert('The "DOWN" key is being held down...?');
x=x-1;
if(x<0){
x=0}
alert(x);
}
});
</script>
</body>
</html>
I want to make a page with riddles and after every riddle an answer button and onclick shows the answer but also changes the value of the button into hide so when you press again the button you hide the answer. I made something but I'm a beginner in Javascript so I can't figure out what I did wrong:HERE
html:
<input type="button" value="Answer" onclick="return change(this);" />
<p id="click">This is the riddle answer.</p>
css:
#click{
display:none;}
js:
$(document).ready(function(){
$(window).change(function(){
if (el.value == "Answer" ){
$("p#click").removeClass("click");
el.value = "Hide";
} else if ( el.value = "Hide";) {
$("p#click").addClass("click");
}
});
});
I want to be something like this: Demo but 1 single button which can change its value and change from answer to hide and from hide to answer.
Here is the updated Demo
jQuery
$(document).ready(function(){
$("#show").click(function(){
if ($(this).text() == "Show")
$(this).text("Hide")
else
$(this).text("Show");
$("span").slideToggle();
});
});
This is the working code for you :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#click").slideToggle();
if($("#show").val() == 'Show') {
$("#show").val('Hide');
}else {
$("#show").val('Show');
}
});
});
</script>
<style>
#click{
display:none;}
</style>
</head>
<body>
<input type="button" value="Show" id="show" />
<p id="click">This is the riddle answer.</p>
</body>
</html>
hi2all i need to handle only the enter button event but my code handle enter even when i click
another button with it
for example when i click Shift+enter from kb it handle click i want to prevent such thing
i want to handle pressing enter alone
{____________
another issue
i want to add new line after each appended text
my code is here
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
$(this).attr("disabled", true);
});
$("#entr").keypress(function(e) {
if (e.which == 13) {
alert("enter pressed");
$("#texts").append($("#entr").val());
}
});
});
</script>
</head>
<body>
<div id="m" style="background-color: darkorange;">click me to change webpage background</div>
<input id="entr" type="text" value="enter some text here" />
<input id="button1" type="button" value="me" />
<p id="texts">text in text box will appended here
<br />
</p>
</body>
</html>
<script type="text/javascript">
//change the color of webpage when clicking the div
var x = document.getElementById("m");
x.addEventListener("click", function() {
document.body.style.backgroundColor = "darkturquoise";
});
</script>
Here's what you need to do. Bind your event keypress to the body.
jQuery(document).ready(function(){
jQuery('body').on('keypress', function(e){
// We are looking for the action "enter"
if(e.which == 13){
// Must not be with shift
if(event.shiftKey !== true){
alert(' Enter ! ');
}
}
});
});
To add a new line, you have to append MyVar = MyVar + '<br />'+"\r\n";
////will work for shift+enter
if (event.keyCode == 13 && event.shiftKey) {
}
How do I detect "shift+enter" and generate a new line in Textarea?