All geek questions in one place

Why is the onchange function called twice when using .focus ()?

TL; DR

  • Mark the example in chrome.
  • Enter the text and press tab. see one new window.
  • enter something and press enter. see two new fields where expected.

Introduction
I noticed that when using enterinstead of tabchanging fields, my exchange function in the input field worked twice. This page was quite large and still in development (read: numerous other errors), so I made a minimal example demonstrating this behavior, in which case it even does it on a tab. As far as I know, this is a problem only in Chrome .

What should he do?
I want to make a new input after something is entered in the input field. This field should be focused.

Example:

javascript - need jquery

function myOnChange(context,curNum){
      alert('onchange start');
      nextNum = curNum+1;
      $(context.parentNode).append('<input type="text" onchange="return myOnChange(this,'+nextNum+')" id="prefix_'+nextNum+'" >');
      $('#prefix_'+nextNum).focus();
      return false;
}

HTML part

<div>
    <input type="text" onchange="return myOnChange(this,1);" id="prefix_1">
</div>

full pastebin code . you need to add your jquery path to the script

A working example is presented here by jFiddle

Onchange is called twice: the function is called myOnChange, makes a new input, calls focus(), myOnChangeis called again, creates a new input, "internal" myOnChangeexits and then "external" exits myOnChange.

I assume this is due to the fact that a change in focus causes onchange()?. I know that there is a difference in behavior between browsers.

.focus() ( ), onchange(), myOnChange() . - ?

+3
6

() , focus()

setTimeout(function() { ... }, 0);

, .

, ; jQuery:

<head>
<style>
input { display: block; }
</style>
<body>
<div></div>
<script>
var div = document.getElementsByTagName('div')[0];

var field = document.createElement('input');
field.type = 'text';
field.onchange = function() {
    // only add a new field on change of last field
    if(this.num === div.getElementsByTagName('input').length)
        div.appendChild(createField(this.num + 1));

    this.nextSibling.focus();
};

function createField(num) {
    var clone = field.cloneNode(false);
    clone.num = num;
    clone.onchange = field.onchange;
    return clone;
}

div.appendChild(createField(1));
</script>
+2

. , , , , .

function onChangeHandler(e){
  if(this.value==this.oldvalue)return; //not changed really
  this.oldvalue=this.value;
  // .... your stuff
}
+6

, myOnChange Chrome. context - .

, . , ( IE).

: , . .

function myOnChange(context, curNum) {
      nextNum = curNum+1;

      if ($('#prefix_'+nextNum).length) return false;// added to avoid duplication

      $(context.parentNode).append('<input type="text" onchange="return myOnChange(this,'+nextNum+')" id="prefix_'+nextNum+'" >');
      $('#prefix_'+nextNum)[0].focus();
      return false;
}

:

$('#prefix_'+nextNum).focus(); , focus - dom, jQuery. $('#prefix_'+nextNum)[0].focus();.

+1

:

var curNum = 1;
function myOnChange( context )
{
    curNum++;

    $('<input type="text" onchange="return myOnChange( this )" id="prefix_'+ curNum +'" >').insertAfter( context );
    $('#prefix_'+ curNum ).focus();

    return false;
}

jsFiddle.

0

, - focus(), onchange . , , :

context.onchange = "";

(Onchange , . , . , , - ( ), , , , ).

: http://jsfiddle.net/k4WKH/2/

@johnhunter, , . , , , , .

0

maybe this will help someone for some reason in chrome, when you attach the onchage event to the input text, when you press enterkey, the function in the event does it twice, I solve this problem, held an event for onkeypress and code evaluation , if I have an input, then execute this function, because I am only waiting for user-user enterkey, which does not work for the tab key.

    input_txt.onkeypress=function(evt){ 
            evt = evt || window.event;
            var charCode = evt.which || evt.keyCode;
            if(charCode === 13)  evaluate( n_rows ); 
             };
0
source

Source: https://habr.com/ru/post/1795703/

More articles:


All Articles