Оптимизировать код,ограничение ввода в input
Есть 4 input проверка на ввод одинаковая для каждого, но после того как число вводимых символов превысило N надо переключиться на другой input.
Сделал так, но еше таких 4 блока писать многовато(размер файла будет большим), как это все в цикл можно запихать? var PS_name_old_1="";
function PS_name_1(){
var PS_name = document.getElementById("id_PS_Name_1");
var result = PS_name.value.match( /^[\x2A-9a-zA-Z\x20\x27]{0,8}$/ig );
if(PS_name.value.length>8){
var el = document.getElementById("id_PS_Name_2");
el.focus();
el.selectionStart=0;
}
if(result==null){
PS_name.value=PS_name_old_1;
}
PS_name_old_1=PS_name.value;
}
|
pokk,
присвоить элементам класс и цикл с помощью forEach |
Цитата:
var PS_name_old=[];
function PS_name(N){
var PS_name = document.getElementById("id_PS_Name_"+N);
var result = PS_name.value.match( /^[\x2A-9a-zA-Z\x20\x27]{0,8}$/ig );
if(PS_name.value.length>8){
var el = document.getElementById("id_PS_Name_"+(N+1));
el.focus();
el.selectionStart=0;
}
if(result==null){
PS_name.value=PS_name_old[N];
}
PS_name_old[N]=PS_name.value;
}
|
Цитата:
|
pokk,
для чего служит модификатор i в выражении? |
А как определить теперь какой input вызвал эту функцию? что бы пропустить проверку на условие длины,а то сейчас получается каждый раз пере сбрасывает позицию курсора во втором input в начало.
var PS_name_old=[];
function PS_name(){
var Test = document.querySelectorAll('.PS_Name');
[].forEach.call(Test,function(el, i){
var result=el.value.match( /^[\x2A-9a-zA-Z\x20\x27]{0,8}$/g );
if(result==null){
el.value=PS_name_old[i];
}
PS_name_old[i]=el.value;
if(el.value.length>7){
var el_next=Test[i+1];
el_next.focus();
el_next.selectionStart=0;
}
});
}
<div align="center">
<input id="id_PS_Name_1" name="N_PS_Name_1" type="text" OnInput="PS_name()" maxlength="8" class="PS_Name">
<input id="id_PS_Name_2" name="N_PS_Name_2" type="text" OnInput="PS_name()" maxlength="8" class="PS_Name">
<input id="id_PS_Name_3" name="N_PS_Name_3" type="text" OnInput="PS_name()" maxlength="8" class="PS_Name">
<input id="id_PS_Name_4" name="N_PS_Name_4" type="text" OnInput="PS_name()" maxlength="8" class="PS_Name">
</div>
|
pokk,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var Test = document.querySelectorAll('.PS_Name');
[].forEach.call(Test, function(el,i) {
var PS_name_old="";
el.addEventListener('input', function() {
var result=el.value.match( /^[\x2A-9a-zA-Z\x20\x27]{0,8}$/g );
if(result==null){
el.value=PS_name_old;
}
PS_name_old=el.value;
var el_next=Test[i+1];
if(el.value.length>7 && el_next){
el_next.focus();
el_next.selectionStart=0;
}
});
});
});
</script>
</head>
<body>
<div align="center">
<input id="id_PS_Name_1" name="N_PS_Name_1" type="text" maxlength="8" class="PS_Name">
<input id="id_PS_Name_2" name="N_PS_Name_2" type="text" maxlength="8" class="PS_Name">
<input id="id_PS_Name_3" name="N_PS_Name_3" type="text" maxlength="8" class="PS_Name">
<input id="id_PS_Name_4" name="N_PS_Name_4" type="text" maxlength="8" class="PS_Name">
</div>
</body>
</html>
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 02:49. |