Запрет ввода в input

Question

Запрет ввода в input

Рейтинг: 0Ответов: 2Опубликовано: 18.01.2015

Есть, например, 3 input. Как сделать запрет на ввод в 2 др, если в один уже введена инфа?

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 3

Отлавливаете события изменения текста (change, paste, input) и меняете значение свойства disabled.

Вариант на чистом JS

function addEvent(html_element, event_name, event_function) {
  if (html_element.addEventListener) { // Modern
    html_element.addEventListener(event_name, event_function, false);
  } else if (html_element.attachEvent) { // Internet Explorer
    html_element.attachEvent("on" + event_name, event_function);
  } else { // others
    html_element["on" + event_name] = event_function;
  }
};

var inputs = [
  document.getElementById('txtOne'),
  document.getElementById('txtTwo'),
  document.getElementById('txtThree')
];

function onTxtChange(e) {
  for (var i = 0; i < inputs.length; i++)
    inputs[i].disabled = e.target != inputs[i] && e.target.value != '';
}

for (var i = 0; i < inputs.length; i++) {
  addEvent(inputs[i], 'change', onTxtChange);
  addEvent(inputs[i], 'paste', onTxtChange);
  addEvent(inputs[i], 'input', onTxtChange);
}

<input type="text" id="txtOne" />
<input type="text" id="txtTwo" />
<input type="text" id="txtThree" />

Вариант с JQuery

$(function() {
  var $inputs = $('#txtOne, #txtTwo, #txtThree');

  $inputs.on('change paste input', function() {
    $inputs.not(this).attr('disabled', this.value == '' ? null : true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" id="txtOne" />
<input type="text" id="txtTwo" />
<input type="text" id="txtThree" />

Answer 2

▲ 1

Где-то этот вопрос я уже видел :)

var inp = document.querySelectorAll('input[type=text]');
[].forEach.call(inp, function(el) {
  el.addEventListener('keyup', lockOther, false);
  el.addEventListener('input', lockOther, false);
});

function lockOther() {
  var indx = [].indexOf.call(inp, this),
    isFilled = this.value.replace(/^\s+|\s+$/gm, '') != '';
  for (var i = 0; i < inp.length; i++) {
    if (i != indx) inp[i].disabled = isFilled;
  }
}

input {
  border: 1px solid #060;
}

input[disabled] {
  border-color: #f00;
}

<input type="text">
<input type="text">
<input type="text">

Запрет ввода в input

Ответы