Characters inserting in wrong index of the string

Question

I am trying to insert additional characters in a specific string.

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="" />

By using onchange attribute in htmlinput, the code runs perfectly. But can this also run with onkeypress attribute? If value of inputs is 1006, the result should be 10'06''. Help. Thanks.

It's weird. For me in your code snippet, only the "onkeypress" input works. The "onchange" input does not work. I'm using firefox — Magus, Oct 07 '15 at 07:47
@Magus have you seen the output on onkeypress? It's 10'0''6 instead of 10'06''. onchange, on the other hand, runs similar to onblur attribute. it only fire the javascript code when focus changes. — eirishainjel, Oct 07 '15 at 07:50
@Kailas right? wanted it to work like this http://stackoverflow.com/questions/32982469/adding-a-character-on-a-string-from-a-htmlinput-using-javascript — eirishainjel, Oct 07 '15 at 07:57
@RayonDabre :) any ideas? it's still unclear to me how javascript substring works — eirishainjel, Oct 07 '15 at 08:00
See @eirishainjel both the onchange and onkeypress are intended for separate functionalities, if you want to edit the text while user typing go for onkeypress, if you want to validate things reformatting them something like in forms before clicking the submit button onChange is recommended instead. — Kailas, Oct 07 '15 at 08:01

score 3 · Accepted Answer · edited May 23 '17 at 11:46

Try this:

You need to replace the quotes('/") before manipulating the string. Also use keyup event. Refer this to understand the purpose of each events. onkeyup is fired when the key is released

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="" />

"keypress event represents a character being typed". Thanks! :) — eirishainjel, Oct 07 '15 at 08:13

score 2 · Answer 2 · answered Oct 07 '15 at 08:27

I see this was already correctly answered, but here's my take.

Adding a timeout to formatting function would give user a chance to enter 4 characters before formatting kicks in and potentially confuses user:

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
}

Please see this CodePen for a working example: http://codepen.io/Tiketti/pen/YyVRwb?editors=101

score 1 · Answer 3 · answered Oct 07 '15 at 08:16

The difference between onchange and onkeypress is,

onchange detects the change in length and values when control is released from element
onkeypress detects the change in length on keypress but change in value on another key press. The length starts from 0 it means if I enter 4567, while typing 7, the length is 0,1,2,3 but value is 456 even the 7 is present in input. But when you press 8 it shows 4567.

You can see that happening here 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 ; }           
  }

 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 ; }           
  }

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

Characters inserting in wrong index of the string

3 Answers3