Форум

pokk · #1 (**permalink**) 30.11.2017, 10:14

Есть 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;
}

рони · #2 (**permalink**) 30.11.2017, 10:28

pokk,
присвоить элементам класс и цикл с помощью forEach

ksa · #3 (**permalink**) 30.11.2017, 10:30

Сообщение от pokk

как это все в цикл можно запихать?

Как вариант...

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

рони · #4 (**permalink**) 30.11.2017, 10:35

Сообщение от ksa

document.getElementById("id_PS_Name_"+(N+1));

а если такого элемента нет?

laimas · #5 (**permalink**) 30.11.2017, 10:52

pokk,
для чего служит модификатор i в выражении?

pokk · #6 (**permalink**) 30.11.2017, 12:17

А как определить теперь какой 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>

рони · #7 (**permalink**) 30.11.2017, 12:39

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>

ksa · #8 (**permalink**) 01.12.2017, 08:56

Сообщение от рони

а если такого элемента нет?

Это уже забота автора темы... Т.к. он даже примера тестового не сделал.

ksa · #9 (**permalink**) 01.12.2017, 08:58

Сообщение от pokk

А как определить теперь какой input вызвал эту функцию?

Можно прочитать свойство ID у текущего элемента... Можно просто поискать "следующий" элемент в разметке...

Форум

Справочник

Discord чат

Курсы javascript