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

Возможно ли иметь ввод 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 может различать два. Выполнение этого же на маке, по-видимому, потребует нажатия клавиш/вверх, чтобы проверить, нажата ли или нет cmd. Это выполнимо, но не включено в этот код, если кто-то хочет это использовать.

источник

2014-02-06 DylanStreb

Я довольно уверен, что это возможно, НО это будет очень плохой пользовательский опыт. Большинство пользователей будут копировать/вставлять идентификатор токена в любом случае, поэтому зачем прикладывать дополнительные усилия для самых маленьких пользователей? – stackErr

Вам нужно будет разрешить вложение клавиш для клавиатуры (которые могут отличаться в зависимости от ОС) и вставки контекстного меню правой кнопки мыши. Кроме того, что мешает им вставить что-то совершенно иное, чем ваш знак? – ajp15243

Откуда они берут маркер? –

<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="" />

источник

2014-02-06 20:34:13 SimplePi

Это просто ограничивает текстовое поле только номерами, а также запрещает вставлять текст. – DylanStreb

@ DylanStreb Я исправил номер. Вклеивание прекрасно работает. Проверено на моем собственном сервере. – SimplePi

Просто выполняйте 'key! = 22' вместо' key = String.fromCharCode (key); 'и regex, похоже, работает, поскольку 22 - это значение, заданное клавишей при нажатии ctrl-v. Меню правой кнопки мыши не изменяется. Выполнение этого способа может быть решением, но мне нужно будет его более тщательно протестировать. Благодарю. – DylanStreb

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

источник

2014-02-06 14:47:41 Tom

Извините, обновил его более подробно: токен получен из настольного приложения. Это серийный номер для физического устройства, которое они должны применять к своей учетной записи пользователя. – DylanStreb

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

сделать текстовое поле так же, как только для чтения, но почтит индекс табуляции и установить фокус
Поддержка всех функций буфера обмена выиграть и макинтош с помощью мыши или клавиатуры
Allow отмены, повтора и выбрать все

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

источник

2017-01-03 21:29:36

Мне нравится ваше решение лучше всего. Отличная кросс-браузерная/системная поддержка. – Adam

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

ответ

Смежные вопросы