Warning popup if someone enters a url in the box

Question

How do I return a warning pop-up if someone enters a url or start typing ‘http’?

My code below only pop up warning if someone starts typing http in the box, but not if someone paste a whole url in the box.

<p>Enter http on the keyboard in the input field, to alert some text.</p>

<input type="text" size="50" onkeydown="keyCode(event)"> 

<script>
function keyCode(event) {
    var x = event.keyCode;
    if (x == 80) {
        alert ("Pleas do not enter a url!");
    }
}
</script>

Answer 1

Your code checks if someone presses p is all.

To do it correctly you need to check contents of input with oninput=yourfunction() instead.

It would be easier if you gave it an id <input ... id="this_input">, then you can access it with var v = document.getElementById("this_input").value;, but you can access it by tag as document.getElementsByTagName("input")[0].value; where [0] is index of your input on the page.

Then you search for a URL in that string with v.search("[some_regexp]");, it returns -1 if it doesn't find a URL. So it's if(v.search("...") >= 0) alert("There is a URL in the input somewhere.");

And lastly depending on what you think is a URL the regexp would be different, the most paranoid one would check if there're 2 words separated by a dot.

Here it is: ((http|ftp|https):\/\/)?([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?

It's unnecessarily long, but you can google a shorter one for your exact purpose. For example to find if there's an http somewhere in the string you just do (http), which doesn't dtop people from posting links, like www.google.com.

Complete example would be:

<p>Enter http on the keyboard in the input field, to alert some text.</p>

<input type="text" size="50" oninput=check()> 

<script>
function check() {
    var v = document.getElementsByTagName("input")[0].value;
    if(v.search("(http)") >= 0)
        alert("woot");
}
</script>

Answer 2

<input type="text" size="50" onkeyup="keyCode(this)"> 

Javascript:

function keyCode(el) {
    var iVal = el.value;

  if(iVal.indexOf('http:') != -1 || iVal.indexOf('https:') != -1) {
        alert('stahop');
  }
}

it allways checks if there is http:, no matter how you put it. can be. ggkmhhhttp: it will still find it. you could do && www or simular.

Answer 3

If you use the input event it will work on all inputs. If you work with really old browsers you might need to change the input event to change in combination with keyup and mouseup

Note that sometimes users will not use http but start with www so be carefull what you define as url.

document.querySelector("input").addEventListener("input", function(){
  if(this.value.indexOf("http") != -1) {
    console.log("works on paste");
  }
});

<input type="text" size="50">