Typing characters in the wrong line pointer

Question

I am trying to insert extra 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="" /> 

Using the onchange attribute in htmlinput, the code works fine. But can this also work with the onkeypress attribute? If the value of the inputs is 1006, the result should be 10'06 ''. Help. Thanks.

Answer 1

Try the following:

Before manipulating the string, you need to replace quotes('/") . Also use the keyup event. Refer to this to understand the purpose of each event. onkeyup fired when you release the key

 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

I see that it already answered correctly, but here is my occupation.

Adding the timeout function to the formatting function will allow the user to enter 4 characters before formatting and potentially confuse the 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

Answer 3

The difference between onchange and onkeypress is

• onchange detects changes in length and values ​​when a control is released from an element
• onkeypress defines a change in the length of a keystroke, but a change in value when another keystroke is pressed. The length starts at 0 , which means that if I find 4567, when typing 7, the length is 0.1,2.3, but the value is 456, even if 7 is present in the input. But when you press 8 , it shows 4567.

You can see what happens 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="" />