如何解决如何只允许在输入中粘贴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);
}
});
Codesandbox示例: https://codesandbox.io/s/brave-thompson-wtvvo?file=/src/index.js:59-75
,您要做的是检查粘贴内容是否与所需内容匹配,如果粘贴不匹配,请阻止粘贴。
您将要在网址字段上附加event listener,并在发生粘贴事件时测试剪贴板内容。
您可以通过调用事件侦听器正在处理的事件对象上的剪贴板数据paste event,从getData("text/plain")中获取剪贴板内容的文本。let data = e.clipboardData.getData("text/plain");
要测试此数据是否符合您的要求,可以使用正则表达式/^https?:\/\/.*$/
的末尾
^
与文本的开始匹配-粘贴数据必须开始以“ http”开头http
完全匹配“ http”s?
与s
匹配(可选)-因此https?
将“ http”与后跟可选的“ s”匹配:\/\/
与冒号斜杠://
匹配,但是/
在正则表达式中表示某些内容,因此必须使用反斜杠\
对其进行转义。.*$
匹配所有其他内容,直到文本$
如果剪贴板数据与您要允许粘贴的数据匹配;如果不匹配,您要通过调用event.preventDefault()
因此,您在此处获得URL字段document.getElementById('url-field')
(假设该字段的 id 为url-field
),并且您附加了事件监听器,收听paste
事件。
我已经将输入字段设置为type="url"
字段,尽管这也可以与type="text"
一起使用,但您可以通过特别指定 url 来获得一些好处。
url字段也可以接受类似ftp://example.com/path/filename.txt
之类的内容,因此您仍然仍然希望粘贴代码。
我还在字段本身上添加验证模式pattern="^https?://.*$"
,这样,如果您键入(而不是粘贴)没有http的内容,它也视为无效。
document.getElementById('url-field')
.addEventListener('paste',e => {
let data = e.clipboardData.getData("text/plain");
let matched = /^https?:\/\/.*$/.test(data);
//console.log('data:',data);
//console.log('matched =',matched);
if (! matched) {
e.preventDefault();
}
// -or- putting everything inline,without extra variables
/*
if (!/^https?:\/\/.*$/.test(
e.clipboardData.getData("text/plain")))
{
e.preventDefault();
}
*/
});
input:invalid {
border-color: red;
}
div.field {
margin-bottom: 0.5em;
}
<form>
<div class="field">
<label>Paste the URL:
<input type="url" id="url-field" pattern="^https?://.*$">
</label>
</div>
<div class="field">
<label>Something else:
<input type="text" id="notTheUrl">
</label>
</div>
</form>
现在,如果您有多个URL字段,并且想在所有这些URL字段上使用此“粘贴规则”,则可以使用querySelectorAll(...)
代替getElementById(...)
,然后附加粘贴处理程序(使用.forEach
来每个字段(我们将在其他时间进行事件委托)
document.querySelectorAll('input[type=url]')
.forEach(element => {
element.addEventListener('paste',e => {
if (!/^https?:\/\/.*$/.test(
e.clipboardData.getData("text/plain")))
{
e.preventDefault();
}
});
});
input:invalid {
border-color: red;
}
div.field {
margin-bottom: 0.5em;
}
<form>
<div class="field">
<label>Paste the URL
<input type="url" pattern="^https?://.*$">
</label>
</div>
<div class="field">
<label>Something else
<input type="text" id="notTheUrl">
</label>
</div>
<div class="field">
<label>Another URL
<input type="url" id="do-not-need-an-id" pattern="^https?://.*$">
</label>
</div>
</form>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。