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

Question

What I want is to allow paste in an input only for urls that contain http and https, if the paste does not contain http or https then I do not want to paste anything.

Any recommendation please?

Answer 1

Try this:

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 example: https://codesandbox.io/s/brave-thompson-wtvvo?file=/src/index.js:59-75

Answer 2

What you want to do is check if the contents of the paste matches what you want, and prevent the paste if it does not match.

You will want to attach an event listener to your URL field(s) and, when the paste event occurs, test the clipboard contents.

You can get the text of the clipboard contents from the paste event by calling clipboardData. getData("text/plain") on the event object that your event listener is handling, which will look something like
let data = e.clipboardData.getData("text/plain");

To test if this data matches what you want you can use the regular expression /^https?:\\/\\/.*$/

^ matches the start of the text — the paste data must begin with "http"
http match exactly "http"
s? match (optionally) an s - so https? matches "http" with an optional "s" after it
:\\/\\/ match the colon-slash-slash :// , but / means something in the regex, so you must escape it with a backslash \\
.*$ match anything else, up until the end of the text $

If the clipboard data matches that you want to allow the paste; if it doesn't match you want to prevent the event's default behavior of pasting by callingevent.preventDefault()

So here you get the URL field document.getElementById('url-field') (assuming the field has an id of url-field ) and you attach the event listener, listening for a paste event.

I have made the input field a type="url" field, although this would also work with type="text" you get some benefits by making it specifically expect a url .
A url field would also accept something like ftp://example.com/path/filename.txt so you still want your paste-prevention code anyway.

I also add a validation pattern pattern="^https?://.*$" on the field itself, so that if you type (not paste) something without http(s) it's also counted as being invalid.

 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>

Now, if you have more than one URL field and you want to put this "paste rule" on all of them, you can use querySelectorAll(...) in place of getElementById(...) , then attach paste-handlers to each of the fields (using .forEach ) (we'll get into event delegation some other time)

 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>