On my work-through I tried to implement moving focus from one text field to another by pressing enter. I have found possible answers in the following links:
How to go to next textbox when enter is pressed?
Move Cursor to next text Field pressing Enter
But none of these are working for me. My code:
<script>
$('input[type='text']').keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
</script>
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
$(document).ready(function () {
$('form').on('submit', function (event) {
event.preventDefault();
})
$('input[type="text"]').keyup(function(event) {
if(event.keyCode === 13) {
$(this).next().focus();
}
});
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>
Just update $('input[type='text']') to $('input[type="text"]'). You had unclosed strings.
Working codepen here.
Here's what's happening:
<!-- Start loading the page -->
<script>
// execute javascript. Note that there
// are no inputs on the page currently - they will be loaded later
// This selector matches nothing:
$("input[type='text']").keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
</script>
<!-- JavaScript executed. Now add inputs to the page -->
<input type='text' />
<input type='text' />
What you can do is either move the <script> below the inputs (easiest) or move the keyup listener to a onload function:
$(function(){
// i.e. wrap your js here
// the js here will be executed only after page has loaded
});
Related
I need the focus to be automatically transferred to the second field after 4 entered characters in the first field.
<input type="text" id="input1">
<input type="text" id="input2">
$("#input1").change(function() {
if ($(this).val().length == 4) {
$("#input2").focus();
}
});
But it does not work. What am I missing? I've tried also
document.getElementById("input2").focus();
But it doesn't work either.
you just need to use keyup event instead of change and other logic will work as is
$(function(){
$("#input1").on('keyup', function() {
if ($(this).val().length == 4) {
$("#input2").focus();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="text" id="input1">
<input type="text" id="input2">
I have thee input fields. Two require input one is type submit. Like you see below.
<input id="cs1" type="text" value="" placeholder="Call Sign" onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus="autofocus" />
<input id="Fname" type="text" value="" name="Fname" placeholder="First Name" onkeyup="nameHint(this.value);" onblur="checkIn();" />
<input id="ckin1" type="submit" value="Check In" />
The usual method is input into cs1, which drops hints at possible values. Select a possible value and tab to the Name input. At which time a name may have been automatically filled or not. Either enter the name or accept the one there. Then tab to the submit input and either click on it or press tab.
This is where the problem is, if you tab you are placed on the URL (address bar) which is bad. If you click the submit the cursor is returned correctly to the cs1 input again.
I've tried all kinds of stuff like you see below, but none of it works.
$(document).ready(function () {
$('#ckin1').on('keydown', function (e) {
if (e.keyCode == 9) {
document.body.firstElementChild.focus();
e.preventDefault();
return false;
}
});
})
$(document).ready(function () {
$( "#ckin1" ).click(function() {
$( "#cs1" ).focus();
});
});
How do I get the cursor to return automatically to the cs1 input filed after a tab from the ckin1 submit?
This seems to work just fine. Since you are already using jQuery, use it to focus the first element.
$("#ckin1").on('keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9 && !e.shiftKey) {
e.preventDefault();
$('#cs1').focus();
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cs1" type="text" value="" placeholder="Call Sign" maxlength="16" />
<input id="Fname" type="text" value="" name="Fname" placeholder="First Name" />
<input id="ckin1" type="submit" value="Check In" />
If i leave it without a keycode it will work with every key but i'm trying to add the "/" key which is keycode "191" and now i can't get it to work. I've even tried using the preventDefault after it and still nothing. How do i properly write it to make it work? Yes i also have the keypress in my input line as well, it's not the problem.
function setFocusToTextBox(field, event) {
if (event.keyCode === 191) {
document.getElementById("order_number").focus();
}
}
</script>
</head>
<body onLoad="document.chip_insert.chip_number.focus();">
<center>
<h1>Jeffers HomeAgain Microchip Entry</h1>
<form name="chip_insert" id="chip_insert" action="<?php echo $PHP_SELF;?>" onsubmit="return validateForm()" method="post" onkeydown="setFocusToTextBox(field, event)">
Order Number: <input tabindex="1" maxlength="12" type="text" name="order_number" id="order_number" value="<?php echo $value; ?>" required="required"onkeydown="return tabOnEnter(this,event)" onfocus="this.focus();this.select()" /><br /><br />
Tag Number: <input tabindex="2" maxlength="15" type="text" name="chip_number" id="chip_number" required="required" /><br /><br />
<input tabindex="7" type="submit" />
</center>
</form>
<br />
<!--End body content -->
</body>
</html>
Try this
window.addEventListener('keydown', keydownCallback);
function keydownCallback(event) {
if (event.keyCode === 191) {
setTimeout(setFocusToTextBox); // setTimeout prevents insertion of slash
}
}
function setFocusToTextBox() {
document.getElementById("order_number").focus();
}
<input id="order_number" placeholder="Press / and I will be focused" size="60">
Press Run Code Snippet
Click somewhere on the area around the input
Press / and the input will be focused.
The working of your snippet is also depends on the event you call from , try to call your function on keydown.
Below is your working code :
document.body.addEventListener("keydown",function(e) {
if (e.keyCode === 191)
alert('Correct');
else
alert('wrong');
});
keyCode may vary for different key events.
So I'm just testing something with js, basically the number in the first input has to be bigger than the number in the second input for the submit button to be activated.
The button get's disabled just right, but if I change the number it won't activate again
<!DOCTYPE HTML>
<html>
<body>
<input type='number' id='first' onchange="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
if(first > second){
document.getElementById('sub').disabled=false;
}else{
document.getElementById('sub').disabled=true;
}
}
</script>
<input type="submit" id="sub"/>
</body>
</html>
Edit:
The arrows of the number input trigger onchange it seems, that caused the problem
You have to add the onclick and onkeyup event in order to respond to mouse interactions and to inserts from the clipboard:
http://jsfiddle.net/wzvvN/1
<input type='number' id='first' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />
<input type='number' id='second' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />
Try binding the onfocus and onblur events to.
<input type='number' id='first' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
You may want to use onkeyup(), since onchange() gets called only when you switch focus to another element.
Also, your function is currently comparing strings. Use parseInt to convert to an integer and then compare. The following code works for me:
<html>
<body>
<input type='number' id='first' onkeyup="validateNumber()"/><br>
<input type='number' id='second' onkeyup="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = parseInt(document.getElementById('first').value, 10);
var second = parseInt(document.getElementById('second').value, 10);
if(first > second){
document.getElementById('sub').disabled=false;
} else {
document.getElementById('sub').disabled=true;
}
}
</script>
<input type="submit" id="sub" disabled="disabled" />
</body>
</html>
I want to create a form like this:
Type in your ID number into the form's input and submit.
The form's action becomes something like /account/{id}/.
I was told JavaScript was the only way to achieve this (see here), but how?
Using jQuery it might look something like this:
$('#inputAccount').change(function () {
$('#myForm').attr('action', 'http://www.example.com/account/' + $('#inputAccount').val());
});
This should change the action of the form any time the text in the input element changes. You could also use .blur() instead of .change() to perform the action whenever focus leaves the input element, so it doesn't keep changing all the time, etc. Then, when the form is submitted, it should submit to whatever was last placed in its action attribute.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(frm.txt).keyup(function(){
$(frm).get(0).setAttribute('action', '/account/'+$(frm.txt).val());
});
});
</script>
</head>
<body>
<form id="frm" action="foo">
<input type="text" id="txt" />
<input type="submit" id="sub" value="do eet" />
</form>
You can do something like this in JavaScript. Depending on the checked radio button (in this case,but it could be another form element) it will be chosen an action or the other:
<script type="text/javascript">
function OnSubmitForm()
{
if(document.myform.operation[0].checked == true)
{
document.myform.action ="insert.html";
}
else
if(document.myform.operation[1].checked == true)
{
document.myform.action ="update.html";
}
return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
<input type="radio" name="operation" value="1" checked>insert
<input type="radio" name="operation" value="2">update
<p>
<input type="submit" name="submit" value="save">
</p>
</form>