Restrict HTML input to only allow paste

问题

Is it possible to have a HTML input on a form that only accepts pasted input?

As part of our registration process, the enduser needs to enter a 20 character identification token into a basic HTML input form. Ideally, the user would simply copy/paste the token into the appropriate field. We don't want to allow the user to manually type this in, as it is likely that they will mistype letters, and we don't have any reliable means to validate the input.

The token comes from desktop software and needs to be pasted into an already opened webpage (i.e. where they download the software from). As such, a clickable link isn't a viable option.

Is there any way to do this, e.g. through Javascript? Thanks.

My solution, adapted from SimplePi's answer:

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

This works in some, but not all browsers. Firefox on Mac is the only offender I've found - firefox in general reports ctrl-v the exact same as v, but on windows the theEvent.ctrlKey member can differentiate between the two. Doing the same on a mac will apparently require keydown/up to check whether or not cmd is pressed. It's doable, but not included in this code, in case anyone else wishes to use this.

回答1:

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

回答2:

Here is a more robust solution, I expanded on the code above. There may be a bit of overkill but it works on all browsers. The code below will:

Make the textbox just like readonly but will honor tab index and set focus
Support all clipboard functions win and mac with mouse or keyboard
Allow undo, redo and select all

$( "#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();
	}
});

回答3:

Why make them even paste it in? if you are sending the verification token via email then just route them to http://example.com/verify/{{TOKEN}} via email and pickup the rest of the registration process from there.

来源：https://stackoverflow.com/questions/21605961/restrict-html-input-to-only-allow-paste

标签

javascript

html

textfield

paste