限制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是否被按下。这是可行的,但不包含在此代码中,以防其他人希望使用此代码。
这似乎只是将文本框限制为仅用于数字,并且还禁止粘贴任何文本。 – DylanStreb
@DylanStreb我修好了这个号码。粘贴工作得很好。在我自己的服务器上检查过它。 – SimplePi
只需执行'key!= 22'而不是'key = String.fromCharCode(key);'和正则表达式似乎工作,因为22是按ctrl-v时设置为键的值。右键菜单不受影响。这样做可能是解决方案,但我需要更彻底地测试它。谢谢。 – DylanStreb
为什么让他们甚至粘贴它?如果您通过电子邮件发送验证令牌,则只需通过电子邮件将它们路由至http://example.com/verify/ {{TOKEN}},并从那里获取注册过程的其余部分。
对不起,用更多详细信息更新它:令牌是从桌面应用程序获得的。这是他们需要应用到其用户帐户的物理设备的序列号。 – 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 }
});
我最喜欢你的解决方案。良好的跨浏览器/系统支持。 – Adam
我敢肯定这是可能,但这将是一个非常糟糕的用户体验。大多数用户无论如何都会复制/粘贴令牌ID,所以为什么要为最低用户付出额外的努力? – stackErr
您必须同时允许键盘快捷方式粘贴(可能因操作系统而异)和右键单击上下文菜单粘贴。另外,如何阻止他们粘贴与您的标记完全不同的东西? – ajp15243
他们从哪里获取令牌? –