HTML требуется только для ввода в форме

Ответ 1

У меня было такое же требование, как и у вас, и я придумал простой способ сделать это. Если вы хотите, чтобы поле "readonly" также было "обязательным" (которое не поддерживается базовым HTML), и вы чувствуете себя слишком ленив, чтобы добавить собственную проверку, просто сделайте поле только для чтения, используя jquery следующим образом:

<input type="text" class="readonly" required />

<script>
    $(".readonly").keydown(function(e){
        e.preventDefault();
    });
</script>

ИЗМЕНИТЬ

как @Ed Bayiates указал в комментарии, вы также можете добавить обработчик пасты для предотвращенияDefault следующим образом:

<input type="text" class="readonly" required />

<script>
    $(".readonly").on('keydown paste', function(e){
        e.preventDefault();
    });
</script>

Ответ 2

readonly поля не могут иметь атрибут required, так как обычно предполагается, что они уже будут иметь некоторое значение.

Ответ 3

Это по дизайну. Согласно официальному стандарту HTML5 ", если атрибут readonly указан во входном элементе, элемент запрещен с помощью проверки ограничений." (Например, его значения не будут проверяться.)

Ответ 4

Удалите readonly и используйте функцию

<input type="text" name="name" id="id" required onkeypress="return false;" />

Он работает по вашему желанию.

Ответ 5

Да, есть решение этой проблемы. Я нашел его с https://codepen.io/fxm90/pen/zGogwV сайта.

Решение заключается в следующем.

HTML файл

<form>
  <input type="text" value="" required data-readonly />
  <input type="submit" value="Submit" />
</form>

Файл CSS

input[data-readonly] {
  pointer-events: none;
}

Ответ 6

Я думаю, что это должно помочь.

<form onSubmit="return checkIfInputHasVal()">
    <input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();"  />
</form>

<script>
     function checkIfInputHasVal(){
        if($("#formAfterRederict").val==""){
             alert("formAfterRederict should have a value");
             return false;
        }
     }
</script>

Ответ 7

Вы можете сделать это для своего шаблона:

<input required onfocus="unselect($event)" class="disabled">

И это для вашего js:

unselect(event){
    event.preventDefault();
    event.currentTarget.blur();
}

Для пользователя вход будет отключен и необходим в одно и то же время, если у вас есть класс css-класса для отключенного ввода.

Ответ 8

На основе ответа @KanakSinghal, но без блокировки всех ключей и с заблокированным событием cut

$('.readonly').keydown(function(e) {
  if (e.keyCode === 8 || e.keyCode === 46)  // Backspace & del
    e.preventDefault();
}).on('keypress paste cut', function(e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="readonly" value="test" />

Ответ 9

Требуется и только для чтения не работают вместе.

Хотя вы можете сделать два ввода, как это:

<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible

И измените значение Two на значение, которое находится внутри входного One.

Ответ 10

Если кто-то хочет сделать это только из HTML, это работает для меня.

<input type="text" onkeydown="event.preventDefault()" required />

Ответ 11

Требуется и только для чтения не работают вместе.

Но readonly может быть заменен следующей конструкцией:

     <input     type="text"
                onkeydown="return false;"
                style="caret-color: transparent !important;"                   
                required>

1) onkeydown прекратит манипуляции с данными

2) style="caret-color: transparent !important;" скроет курсор

3) вы можете добавить style="pointer-events: none;" если у вас нет каких-либо событий на вашем входе, но это был не мой случай, потому что я использовал месяц выбора. Выбор месяца показывает диалоговое окно при нажатии.

Ответ 12

  function validateForm() {
    var x = document.forms["myForm"]["test2"].value;
    if (x == "") {
      alert("Name missing!!");
      return false;
    }
  }

  <form class="form-horizontal" onsubmit="return validateForm()" name="myForm" action="" method="POST">
   <input type="text"  name="test1">
    <input type="text" disabled name="test2">
    <button type="submit">Submit</button>
</form>