Caratteri che inseriscono nell'indice errato della stringa

Question

Sto tentando di inserire caratteri aggiuntivi in ​​una stringa specifica.

function sample(x) { 
 
      if (x.value.length > 2 && x.value.length < 5) { 
 
       var first = x.value.substring(0, 2) + "'"; 
 
       var second = x.value.substring(2, x.value.length) + "''"; 
 
       x.value = first + "" + second ; }   
 
}

<input id="txt" type="text" placeholder="onkeypress" onkeypress="sample(this)" value="" /><br /> 
 
<input id="txt1" type="text" placeholder="onchange" onchange="sample(this)" value="" />

Utilizzando onchange attributo nella HtmlInput, il codice viene eseguito perfettamente. Ma può anche funzionare con l'attributo onkeypress? Se il valore degli input è 1006, il risultato dovrebbe essere 10'06 ". Aiuto. Grazie.

Answer 1

Prova questa:

è necessario sostituire il quotes('/") prima di manipolare la stringa. Utilizzare anche l'evento keyup. Consultare this per comprendere lo scopo di ciascun evento. onkeyup viene attivato quando il tasto viene rilasciato

function sample(x) { 
 
    x.value = x.value.replace(/[\'\"]/g, ''); 
 
    if (x.value.length > 2 && x.value.length < 5) { 
 
    var first = x.value.substring(0, 2) + "'"; 
 
    var second = x.value.substring(2, x.value.length) + "''"; 
 
    x.value = first + "" + second; 
 
    } 
 
}

<input id="txt" type="text" placeholder="onkeypress" onkeyup="sample(this)" value="" /> 
 
<br/> 
 
<input id="txt1" type="text" placeholder="onchange" onchange="sample(this)" value="" />

Answer 2

La differenza tra onchange e onkeypress è,

1. onchange rileva la variazione di lunghezza e valori quando il controllo è rilasciato dall'elemento
2. onkeypress rileva la variazione di lunghezza sulla pressione di un tasto, ma modifica il valore su un'altra pressione di un tasto. La lunghezza inizia da significa che se inserisco 4567, mentre digito 7, la lunghezza è 0,1,2,3 ma il valore è 456, anche il 7 è presente in ingresso. Ma quando si preme mostra 4567.

Si può vedere che succede qui http://codepen.io/anon/pen/XmRydE

function sample(x) { 
 
    console.log(x.value); 
 
    console.log(x.value.length); 
 
      if (x.value.length > 2 && x.value.length < 5) { 
 
       var first = x.value.substring(0, 2) + "'"; 
 
       var second = x.value.substring(2, x.value.length) + "''"; 
 
       x.value = first + "" + second ; }   
 
\t \t } 
 

 
function sampleKeyPress(x) { 
 
    console.log(x.value); 
 
    console.log(x.value.length); 
 
      if (x.value.length >= 4 && x.value.length < 5) { 
 
       var first = x.value.substring(0, 2) + "'"; 
 
       var second = x.value.substring(2, x.value.length) + "''"; 
 
       x.value = first + "" + second ; }   
 
\t \t }

<input id="txt" type="text" placeholder="onkeypress" onkeypress="sampleKeyPress(this)" value="" /><br /> 
 
<input id="txt1" type="text" placeholder="onchange" onchange="sample(this)" value="" />

Answer 3

vedo questo è stato già risposto correttamente, ma qui è il mio prendere.

Aggiunta di un timeout alla funzione di formattazione darebbe all'utente la possibilità di entrare 4 caratteri prima di formattare calci e potenzialmente confonde utente:

function sample(x) { 
    setTimeout(function() { 
    if (x.value.length > 2 && x.value.length < 5) { 
     var first = x.value.substring(0, 2) + "'"; 
     var second = x.value.substring(2, x.value.length) + "\""; 
     x.value = first + second; 
    } 
    }, 1500); // this is the timeout value in milliseconds 
} 

consulta questo CodePen per un esempio di lavoro: http://codepen.io/Tiketti/pen/YyVRwb?editors=101