Ограничить ввод HTML, чтобы разрешить только вставку

Возможно ли иметь ввод HTML в форме, которая принимает только вставленный ввод?

В рамках нашего процесса регистрации конечному пользователю необходимо ввести токен идентификации из 20 символов в базовую форму ввода HTML. В идеале пользователь просто скопирует / вставит токен в соответствующее поле. Мы не хотим, чтобы пользователь мог вводить это вручную, так как вполне вероятно, что они будут печатать неправильно, и у нас нет надежных средств для проверки ввода.

Токен исходит от настольного программного обеспечения и должен быть вставлен в уже открытую веб-страницу (то есть, откуда они загружают программное обеспечение). Таким образом, кликабельная ссылка не является жизнеспособным вариантом.

Есть ли способ сделать это, например, через Javascript? Благодарю.

Мое решение, адаптированное из ответа SimplePi:

<html>
<body>
<script type="text/javascript">
 function validate(evt) {
   var theEvent = evt || window.event;
   var key = theEvent.charCode || theEvent.which;

   if(key >= 32 && (theEvent.ctrlKey === undefined || !theEvent.ctrlKey)) {
    if(theEvent.preventDefault) theEvent.preventDefault();
    else theEvent.returnValue = false;
  }
 }
 </script>
  <span>Textbox name</span> <br />
 <input type="text" onkeypress='validate(event)' value=""/>
</body>
</html>

Это работает в некоторых, но не во всех браузерах. Firefox на Mac - единственный преступник, которого я нашел - firefox в общих отчетах ctrl-v точно так же, как v, но на окнах то theEvent.ctrlKey член может различать два. Чтобы сделать то же самое на Mac, очевидно, потребуется keydown/up, чтобы проверить, нажата ли cmd. Это выполнимо, но не включено в этот код, если кто-то еще захочет использовать это.

Источник

3 ответа

Решение
<script type="text/javascript">
 function validate(evt) {
   var theEvent = evt || window.event;
   var key = theEvent.keyCode || theEvent.which;
   key = String.fromCharCode(key);
  var regex = /[]|\./;
   if(!regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
 }
 </script>
  <span>Textbox name</span>
 <input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' value=""         required tabindex="" />
Источник

Вот более надежное решение, я расширил код выше. Там может быть немного излишним, но это работает во всех браузерах. Код ниже будет:

  1. Сделайте текстовое поле таким же, как только для чтения, но примите во внимание индекс вкладки и установите фокус
  2. Поддержка всех функций буфера обмена Win и Mac с помощью мыши или клавиатуры
  3. Разрешить отменить, повторить и выбрать все 

$( "#your_textbox" ).keypress(function(evt) {
 // Note this could be a bit of overkill but I found some
 // problems in Firefox and decided to go the distance
 // including old windows keyboard short cut keys.
 // Enumerate all supported clipboard, undo and redo keys
 var clipboardKeys = {
  winInsert : 45,
  winDelete : 46,
  SelectAll : 97,
  macCopy : 99,
  macPaste : 118,
  macCut : 120,
  redo : 121, 
  undo : 122
 }
 // Simulate readonly but allow all clipboard, undo and redo action keys
 var charCode = evt.which;
 //alert(charCode);
 // Accept ctrl+v, ctrl+c, ctrl+z, ctrl+insert, shift+insert, shift+del and ctrl+a
 if (
  evt.ctrlKey && charCode == clipboardKeys.redo ||  /* ctrl+y redo   */
  evt.ctrlKey && charCode == clipboardKeys.undo ||  /* ctrl+z undo   */
  evt.ctrlKey && charCode == clipboardKeys.macCut ||  /* ctrl+x mac cut  */
  evt.ctrlKey && charCode == clipboardKeys.macPaste ||  /* ctrl+v mac paste  */
  evt.ctrlKey && charCode == clipboardKeys.macCopy ||  /* ctrl+c mac copy  */ 
  evt.shiftKey && evt.keyCode == clipboardKeys.winInsert || /* shift+ins windows paste */ 
  evt.shiftKey && evt.keyCode == clipboardKeys.winDelete || /* shift+del windows cut */ 
  evt.ctrlKey && evt.keyCode == clipboardKeys.winInsert  || /* ctrl+ins windows copy */ 
  evt.ctrlKey && charCode == clipboardKeys.SelectAll  /* ctrl+a select all  */
  ){ return 0; }
 // Shun all remaining keys simulating readonly textbox
 var theEvent = evt || window.event;
 var key = theEvent.keyCode || theEvent.which;
 key = String.fromCharCode(key);
 var regex = /[]|\./;
 if(!regex.test(key)) {
  theEvent.returnValue = false;
  theEvent.preventDefault();
 }
});

Источник

Зачем их даже вставлять? если вы отправляете токен подтверждения по электронной почте, просто направьте его по http://example.com/verify/{{TOKEN}} по электронной почте и получите оставшуюся часть процесса регистрации.

Источник
Другие вопросы по тегам