Focus on next input element by refer class name using jquery - javascript

when user input value in text box it should move to next textbox if that input field contain specific class name but if another text box doesn't have that class name then it should not move to next
<input type="text" maxlength="1" class="txt_cls" />
<input type="text" maxlength="1" class="txt_cls" />
<input type="text" maxlength="1" class="txt_cls" />
<input type="text" maxlength="1" class="" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
$('input.txt_cls').on("input", function(){
if($(this).val().length==$(this).attr("maxlength")){
// $(this).next().focus();
$(this).next().find('.txt_cls').focus();
}
});
});
</script>

oh I did small mistake, forgot to mention .closest(); now it is working fine
$(document).ready(function(){
$('input.txt_cls').on("input", function(){
if($(this).val().length==$(this).attr("maxlength")){
//$(this).next().focus();
$(this).next().closest('.txt_cls').focus();
}
});
});

Related

Input go down after I changed his value

I never seen this problem before, hope some can help.
When I change input value attribution from S to G using jquery the input go down.
Edit: I found the problem, I just needed to add to the main div of the inputs this css:
display:inline-flex;
$('body').on("click", "#submit", function() {
$('#input1').attr('value', 'G');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputs" id="input1" type="button" value='S' maxlength="1" />
<input class="inputs" id="input2" type="button" value='T' maxlength="1" />
<input type="submit" id="submit" maxlength="1" value="change"/>
This code is almost the same to my code (instead of my inputs css)
the result in my code: (image)
you can see in the image how to inputs that I changed their value go down, and the empty inputs stay in place.

How to detect the change on input when it changed dynamically

How to detect the changes in input values when it is dynamically changed.
as the change on txt2 clear the value in txt1 . I need to detect that it has cleared or changed.
Onchange does not do that.
<input id="txt1" type="text" onchange="SetDefault();" onpaste="this.onchange();" oninput="this.onchange();">
<br>
<input id="txt2" type="text" onchange="SetDefaultSecond();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
<script>
function SetDefault(){
alert("Change1");
}
function SetDefaultSecond(){
$("#txt1").val('');
alert("Change2");
}
</script>
You can manually trigger the input event when you clear the first input like this:
<input id="txt1" type="text">
<br>
<input id="txt2" type="text">
<script>
$("#txt1").on("input", function() {
alert("Change1");
});
$("#txt2").on("input", function() {
$("#txt1").val('').trigger('input');
alert("Change2");
});
</script>
jsFiddle here: https://jsfiddle.net/dr0oabj1/
you need to use oninput event to capture any change to an input. it triggers every time the value changes due to typing/pasting etc. difference between onchange & oninput is onchange only triggers after focus goes off the input where as oninput triggers every time values changes due to any reason.
function SetDefault(){
alert("Change1");
}
function SetDefaultSecond(){
$("#txt1").val('');
alert("Change2");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="txt1" type="text" oninput="SetDefault();" />
<br>
<input id="txt2" type="text" oninput="SetDefaultSecond();"/>
Try this :
$(document).ready(function(){
$("#txt2").on("input",function(){
$("#txt1").val('');
console.log("Change2");
})
$("#txt1").on("input",function(){
console.log("Change1");
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
Text 1 : <input id="txt1" type="text">
<br><br>
Text 2 : <input id="txt2" type="text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txt2").on("input",function(){
$("#txt1").val('');
console.log("Change2");
})
$("#txt1").on("input",function(){
console.log("Change1");
})
})
</script>
</body>
</html>
Kodies answer is right; just try this ultra simple example and then proceed to Detect all changes to a (immediately) using JQuery
<input id="txt1" type="text" oninput="console.log('input')" onchange="this.oninput()">
<br>
<button onclick="eval(this.textContent)">console.log('clearing'); txt1.value=''</button>
<br>
<button onclick="eval(this.textContent)">console.log('clearing <b>and triggering</b>'); txt1.value=''; <b>txt1.onchange()</b></button>
use this in txt2
oninput="changeClass(txt2);"
and in script
function changeClass(text) {
if(text.value==''){
//code for clear txt1
}
}

How Do I pass a value in a input box, to another input box

I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you
Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};
First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});
this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();

In which TextBox is the cursor.?

I have 4 textboxes and a submit button in my web page.
Suppose the user enters data in 2 fields and then clicks the submit button.
I now want to know in which textbox the cursor was located just before the submit button was clicked.
Any idea on how to do this in Javascript?
You're looking for document.activeElement, which returns the currently focused element.
Your question does specifically say in javascript, but FWIW here is another option in jQuery:
Working jsFiddle here
HTML:
<input id="in1" type="text" /><br />
<input id="in2" type="text" /><br />
<input id="in3" type="text" /><br />
<input id="in4" type="text" /><br />
<input type="button" id="mybutt" value="Submit" />
jQuery:
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = $(this).attr('id');
});
$('#mybutt').click(function() {
alert('Cursor was last in element id: ' + inFocus);
});
you can use document.activeElement
here is the simple example for the same.
<head>
<script type="text/javascript">
function GetActive () {
if (document.activeElement) {
var output = document.getElementById ("output");
output.innerHTML = document.activeElement.tagName;
}
}
</script>
</head>
<body onclick="GetActive ();">
Click anywhere on the page to get the active element
<input id="myInput" value="input field" />
<button>Sample button</button>
<div id="output"></div>
</body>

How to chang all <input> to its value by clicking a button and change it back later?

The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});​​​
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
​
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>​
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
​
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
​
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();

Categories