С проверкой ввода URL-адреса HTML5 предположим, что url начинается с http://

HTML5 обеспечивает автоматическую проверку URL: -

<form>
   <input type="url" name="someUrl">
</form>

Это приведет к отказу проверки URL-адреса, у которого нет префикса протокола - например, stackoverflow.com провалится, пока пройдет http://stackoverflow.com.

Как я могу автоматически добавлять http://к URL-адресу, если еще нет протокола?

Я мог бы добавить обработчик события onblur, но есть ли лучший способ, как некоторые перед событием проверки?

Ответ 1

Код для этого не должен прерывать действие пользователя, но должен ждать, пока пользователь не покинет поле формы, чтобы проверить текст ввода для "http". Поэтому используйте "onblur" вместо "onkeyup".

Затем просто посмотрите, содержит ли строка "http" с помощью indexOf. Если нет, он вернет -1, что ложно.

function checkURL (abc) {
  var string = abc.value;
  if (!~string.indexOf("http")) {
    string = "http://" + string;
  }
  abc.value = string;
  return abc
}

<form>
  <input type="url" name="someUrl" onblur="checkURL(this)" />
  <input type="text"/>
</form>

Ответ 2

, если вы не хотите, чтобы проверка браузера (она может различаться между браузерами), вы можете добавить следующий атрибут novalidate

<input type="url" name="someUrl"  formnovalidate="formnovalidate">

else, вы можете быть более прозрачным в отношении префикса http://просто добавив, как только кто-то начнет вводить или даже имеет http://уже введенный в поле на странице load

(кредит редактору, который справедливо отмечает, что novalidate относится к форме, в то время как выше переопределяет это, дебет для кредитора для подхода к редактированию;)

Ответ 3

вы можете использовать

HTML:

<form>
   <input type="url" name="someUrl" onkeyup="checkUR(this)" >
</form>

SCRIPT:

function checkUR(abc){
    string = abc.value
    if(!(/^http:\/\//.test(string))){
        string = "http://" + string;
    }
    abc.value=string
}

пример

Я надеюсь, что это поможет

Ответ 4

Вы можете попытаться заставить пользователей ввести действительный url, указав начальное значение и заполнитель.

<label for="some-url">Some url:</label>
<input id="some-url" type="url" placeholder="http://example.com" value="http://">

Ответ 5

Это добавит URL-адрес перед отправкой, если в URL-адресе нет http или https. Он также нечувствителен к регистру (i в конце). Я также использую onchange вместо других событий для учета пользователей, нажимающих клавишу ввода и отправки формы таким образом.

SCRIPT:

function checkURL(o) {
    if (!/^https?:\/\//i.test(o.value)) {
        o.value = "http://" + o.value;
    }
}

АЛЬТЕРНАТИВА SCRIPT: (Всегда правильно на "http://" )

function checkURL(o) {
    o.value = o.value.replace(/^(https?:\/\/)?/i, "http://");
}

HTML:

<form>
   <input type="url" name="someUrl" onchange="checkURL(this)" >
</form>

Ответ 6

Я загрузил в GitHub директиву AngularJS для автоматического добавления http://. Полезно для пользователя как минимум.

https://github.com/rupperyes/MyAngularDirectives/

Ответ 7

то, что вы, ребята, вероятно, хотите использовать, следующее:

$(function(){
         $('input[type="url"]').on('blur', function(){
           var string = $(this).val();
           if (!string.match(/^https?:/) && string.length) {
             string = "http://" + string;
              $(this).val(string)
           }
         });
});

это выполняется на готовом документе

проверяет, пусто ли значение или отсутствует http в начале

вставляет его в этом случае при размытии

спасибо @1j01