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?
Related
How to disable/remove only first space on Multiple input field?
In this example how to use multiple input fields. DEMO HERE
$(function() {
$('body').on('keydown', '#test', function(e) {
console.log(this.value);
if (e.which === 32 && e.target.selectionStart === 0) {
return false;
}
});
});
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label>Name</label>
<input type="text" id="test">
<label>Mobile</label>
<input type="text" id="test1">
<label>Comments</label>
<input type="text" id="test2">
</body>
</html>
I guess you should be using keycode
Check this https://jsfiddle.net/qn09n676//
e.keyCode === 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);
}
});
});
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
I am trying to validate an html form using javascript the code is bellow
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function validate(){
if(document.form1.thbox.checked)
{
alert("yes");
}
else
alert("no");
}
</script>
<form name="form1" method="get">
<input type="checkbox" name="thebox"/>
<input type="button" value="press me" onclick="validate()"/>
</form>
</body>
</html>
when ever I try to press on button nothing works
Can someone please tell me why is that?
Thank you
Change if(document.form1.thbox.checked) to if(document.form1.thebox.checked) You have missed e in thebox
http://jsfiddle.net/eJhzf/
Perhaps because checked is not a valid property of undefined:
HTML:
name="thebox"
Javascript:
form1.thbox.checked
Notice the missing e, so, it should be:
form1.thebox.checked
use this method
if ( document.form1.thebox.checked == false )
{
alert ( "Please select check box." );
}
else {
// your code or message
}
and use thebox instead of thbox
The code below is colouring the input but not submitting the form in chrome. It's working in Firefox:
<script type="text/javascript">
$(function(){
$('input').keypress(function(event) {
if (event.keyCode == '13') {
//alert($(this).parentsUntil('form').css('color'));
$('form').css('color','red');
$('form').submit();
}
});});</script>
Please note that the submit button is set to display:none, if I change it to visibility:hidden, it works but it reserve the place which is not what I want.
Thanks.
EDIT
Here's a full example as requested below:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<title>دخول</title>
<script type="text/javascript">
$(function(){
$('input').keypress(function(event) {
if (event.keyCode == 13) {
$(this).parents('form').submit();
}
});
});
</script>
</head>
<body>
<form action="http://www.yahoo.com" method='post'>
<table >
<tr><td>name: </td><td><input type="text" name="username" value=""></td></tr>
<tr><td>password: </td><td><input type="password" name="password" value=""></td></tr>
<tr><td colspan=2>Login
<div style="display: none;"><input type="submit" name="submit" value="Login" id="loginfrm"></div></td></tr>
</table>
</form>
your problem is that you named your submit button submit, the browser sees that as a used name, give the submit button a name like dosubmit or whatever and it works.
with name submit (does not work)
http://www.jsfiddle.net/pVUwW/
with name dosubmit (works)
http://www.jsfiddle.net/pVUwW/1/
the only difference in those is the name of the submit.
Other than that i changed the event.keyCode to event.which from your original code, see http://api.jquery.com/event.which/ for explanation why.
This is strange, just tried this in Chrome, it works correctly even without your code (keypress)
http://jsfiddle.net/72Nbm/