Create another input field with the enter key

Asked

Viewed 179 times

0

I am working on an HTML form to receive the data from a bar code reader.

Next: each time the reader loads the input value of the barcode it automatically gives a enter which is Event.keycode= 13 then... I need that besides it create the next field (input) it jumps to the next input and so successively it already stands in wait within the next field expecting the value.

(I am currently clicking the TAB key in order to jump to the next field want to do this automatically )

Can anyone help me adjust the code below manjo little javascript and jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://demos.codexworld.com/includes/js/bootstrap.js"></script>
<link href="http://demos.codexworld.com/includes/css/bootstrap.css" rel="stylesheet">


<script type="text/javascript">
$(document).ready(function(){
	var maxField = 10; //Input fields increment limitation
	var addButton = $('.add_button'); //Add button selector
	var wrapper = $('.field_wrapper'); //Input field wrapper
	var fieldHTML = '<div><input id="campo" type="text" name="field_name[]" value=""/><a  href="javascript:void(0);" class="remove_button">-</a></div>'; //New input field html 
	var x = 1; //Initial field counter is 1
	
	//Once add button is clicked
	$(addButton).click(function(){
		//Check maximum number of input fields
		if(x < maxField){ 
			x++; //Increment field counter
			$(wrapper).append(fieldHTML); //Add field html
		}
	});
	
	//Once remove button is clicked
	$(wrapper).on('click', '.remove_button', function(e){
		e.preventDefault();
		$(this).parent('div').remove(); //Remove field html
		x--; //Decrement field counter
	});
});
</script>




<script>

								
$(window).load(function(){
// aqui verifica se deu enter e clica no butao para adicionar mais um campo
 $("#campo").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#butao").click();	
    }
});
	
	
// aqui parar o submit  com o enter
$('form input').on('keypress', function(e) {
    return e.which !== 13;
});


    });
								

</script>





<form name="codexworld_frm" action="" method="post">
            	<div class="field_wrapper">
                  <div>
                        <input id="campo" type="text" name="field_name[]" value=""/>
<a href="javascript:void(0);" class="add_button" title="Add field" id="butao"><span class="glyphicon-class">+</a>
                    </div>
                </div>
                <input type="submit" name="submit" value="SUBMIT"/>
                </form>

javascript jquery

3 answers

0

0

Just use the function $(element).focus() Follows Example

    function fTeste() {
        $('#i3').focus()
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <input id="i1" type="text">
        <input id="i2" type="text">
        <input id="i3" type="text">
        <input type="button" onclick="fTeste()" value="input 3">

0

I think I understand what you want to do... I did it like this :

// When enter key is triggered

$(document).keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                if(x < maxField){ 
                    x++; //Incrementa contador do campo
                    $(wrapper).append(fieldHTML); //Add field html
                    $('input[type=text]:last')[0].focus();
                }
            }
        });

// Once the Add button is clicked

$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
        x++; //Incrementa contador do campo
        $(wrapper).append(fieldHTML); //Add field html
        $('input[type=text]:last')[0].focus();
    }
});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.