Ввод символов в неправильный индекс строки

Question

Я пытаюсь вставить дополнительные символы в определенную строку.

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

Используя onchange атрибут в htmlinput, код работает отлично. Но может ли это также работать с атрибутом onkeypress? Если значение входов составляет 1006, результат должен быть 10'06 ''. Помогите. Благодарю.

Answer 1

Попробуйте это:

Вы должны заменить quotes('/") перед тем манипулируя строку. Также используйте событие keyup. Обратитесь к this, чтобы понять цели каждого события. onkeyup вызывается при отпускании клавиши

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

Разница между OnChange и OnKeyPress есть

1. OnChange обнаруживает изменение длины и значения, когда управление высвобождается из элемента
2. onkeypress определяет изменение длины при нажатии клавиши, но изменение значения при другом нажатии клавиши. Длина начинается с Это означает, что если я вхожу 4567, то при вводе 7 длина равна 0,1,2,3, но значение равно 456, даже 7 присутствует во входе. Но при нажатии он показывает 4567.

Вы можете видеть, что здесь происходит 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

Я вижу это уже ответили правильно, но вот мое взятие.

Добавление таймаут к функции форматирования даст пользователю возможность ввести 4-х символов перед форматированием пинки в и потенциально запутывает пользователя:

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 
} 

Пожалуйста, ознакомьтесь CodePen для рабочего примера: http://codepen.io/Tiketti/pen/YyVRwb?editors=101