Javascript 如何只允许在输入中粘贴URL？

我想要的是只允许粘贴包含http和https的URL的输入，如果粘贴不包含http或https，那么我不想粘贴任何内容

有什么建议吗？

试试这个：

element.addEventListener('paste', (e) => {
    e.preventDefault();
    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
    if(/^http/.test(text)) {
      window.document.execCommand('insertText', false, text);
    }   
});

代码沙盒示例：

---

您要做的是检查粘贴内容是否与所需内容匹配，如果不匹配，则阻止粘贴

您需要在URL字段中附加一个，并在发生粘贴事件时测试剪贴板内容

您可以通过调用clipboardData从获取剪贴板内容的文本。在事件侦听器正在处理的事件对象上，该事件对象看起来类似于

let data=e.clipboardData.getData（“text/plain”）

要测试此数据是否与所需数据匹配，可以使用正则表达式
/^https？：\/\/.$/

^
匹配文本的开头-粘贴数据必须以“http”开头

http
完全匹配“http”

s？
匹配（可选）一个
s
-so
https？
将“http”与其后的可选“s”匹配

：\/\/
匹配冒号斜杠
：/
，但
/
表示正则表达式中的某些内容，因此必须用反斜杠将其转义
\


*$
匹配任何其他内容，直到文本的结尾
$

如果剪贴板数据与要允许粘贴的数据匹配；如果不匹配，则希望通过调用阻止事件的默认粘贴行为

因此，这里您将获得URL字段
document.getElementById（'URL-field'）
（假设该字段的id为
URL-field
），并连接事件侦听器，侦听
粘贴
事件

我将输入字段设置为一个
type=“url”
字段，尽管这也适用于
type=“text”
您可以通过使其专门用于url而获得一些好处。

url字段也会接受类似
ftp://example.com/path/filename.txt
所以您仍然需要粘贴预防代码

我还在字段本身上添加了一个验证模式
pattern=“^https？：//.*$”
，这样，如果您键入（而不是粘贴）没有http的内容，它也会被视为无效


document.getElementById（'url-field'）
.addEventListener（'paste'，e=>{
让data=e.clipboardData.getData（“text/plain”）；
让matched=/^https？：\/\/.$/.test（数据）；
//console.log（'数据：'，数据）；
//log（'matched='，matched）；
如果（！匹配）{
e、 预防默认值（）；
}
//-或-将所有内容内联，无需额外变量
/*
如果（！/^https？：\/\/.$/.测试(
e、 获取数据（“文本/普通”））
{
e、 预防默认值（）；
}
*/
});
输入：无效{
边框颜色：红色；
}
分区域{
边缘底部：0.5em；
}

粘贴URL:
还有一件事：
你好，欢迎光临！您尝试了什么代码？您需要捕获粘贴事件并访问剪贴板。不会得到所有browsersHello Domenik的支持，非常感谢您的回复。我已经试过了，但它不起作用，也许我和输入一起形成了一些不好的东西。请给我看一个完整的带有iput字段的示例集好吗？我不是一个网络程序员，我很笨拙，我会很感激的。谢谢你！它工作正常，但在Firefox中，粘贴完全停止工作，尽管您在第一个答案中已经警告过我。无论如何，非常感谢你，我会想办法在Firefox中禁用它。我有最新版本的Firefox（80.0），但它不工作。我试着投赞成票，但我没有足够的权限，它告诉我：谢谢你的反馈！声誉低于15的人所投的票会被记录下来，但不会改变公开显示的帖子分数。您好，Domenik，您可以将示例作为堆栈片段放在答案中，而不是外部作为codesandbox、JSFIDLE、codepen或其他任何东西。这样，你的例子永远不会消失，与你的例子的链接永远不会中断。