限制HTML输入只允许粘贴

是否可以在只接受粘贴输入的表单上有HTML输入？限制HTML输入只允许粘贴

作为我们注册过程的一部分，最终用户需要在基本的HTML输入表单中输入20个字符的标识标记。理想情况下，用户只需将该令牌复制/粘贴到适当的字段中即可。我们不希望用户手动输入，因为他们很可能会输错字母，我们没有任何可靠的方法来验证输入。

令牌来自桌面软件，需要粘贴到已经打开的网页（即他们从中下载软件的地方）。因此，可点击链接不是可行的选择。

有没有办法做到这一点，例如通过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是否被按下。这是可行的，但不包含在此代码中，以防其他人希望使用此代码。

来源

2014-02-06 DylanStreb

我敢肯定这是可能，但这将是一个非常糟糕的用户体验。大多数用户无论如何都会复制/粘贴令牌ID，所以为什么要为最低用户付出额外的努力？ – stackErr

您必须同时允许键盘快捷方式粘贴（可能因操作系统而异）和右键单击上下文菜单粘贴。另外，如何阻止他们粘贴与您的标记完全不同的东西？ – ajp15243

他们从哪里获取令牌？ –

来源

2014-02-06 20:34:13 SimplePi

这似乎只是将文本框限制为仅用于数字，并且还禁止粘贴任何文本。 – DylanStreb

@DylanStreb我修好了这个号码。粘贴工作得很好。在我自己的服务器上检查过它。 – SimplePi

只需执行'key！= 22'而不是'key = String.fromCharCode（key）;'和正则表达式似乎工作，因为22是按ctrl-v时设置为键的值。右键菜单不受影响。这样做可能是解决方案，但我需要更彻底地测试它。谢谢。 – DylanStreb

为什么让他们甚至粘贴它？如果您通过电子邮件发送验证令牌，则只需通过电子邮件将它们路由至http://example.com/verify/ {{TOKEN}}，并从那里获取注册过程的其余部分。

来源

2014-02-06 14:47:41 Tom

对不起，用更多详细信息更新它：令牌是从桌面应用程序获得的。这是他们需要应用到其用户帐户的物理设备的序列号。 – DylanStreb

这是一个更强大的解决方案，我扩展了上面的代码。可能有点矫枉过正，但适用于所有浏览器。下面将代码：

使文本框就像只读的，但将尊重标签索引，并将焦点
支持所有剪贴板功能取胜，MAC用鼠标或键盘
允许撤消，重做和选择所有

$("#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输入只允许粘贴

回答

相关问题