Сделать Chrome не запрашивать «http: //» на входе

У меня есть форма HTML, отправляемая через AJAX. Так, один из полей:Сделать Chrome не запрашивать «http: //» на входе

<input type="url">

И по умолчанию Chrome запрашивает значение этого поля, чтобы быть в следующем формате:

http://example.com

Как я использую самозагрузки, у меня есть следующие поле ввода видимо: watch this screenshot.

Я хочу, чтобы пользователь вводил URL-адрес без префикса HTTP/HTTPS, но в этом случае Chrome утверждает, что он не является допустимым URL-адресом.

Каким может быть решение? Как заставить браузер думать, что для строки URL не нужен префикс http?

P.S. Я использую type="url", чтобы упростить ввод адресов страниц с устройств Android/iOS.

источник

2014-09-11 Artem Ushakov

Используйте атрибут 'pattern' и укажите регулярное выражение, которое не требует протокола. – SeinopSys

Вам нужно использовать тип ввода URL? Вместо этого используйте 'type =" text "'? – Luke

@ilovecode Не читал ли вы последнюю строку? – epascarello

К definition, <input type="url"> представляет собой элемент управления для редактирования одиночного абсолютного URL. Абсолютный URL-адрес содержит часть протокола; это не недопустимый «префикс». Независимо от того, имеет ли браузер способ префикса пользовательского ввода с использованием протокола по умолчанию, например http://, это другая проблема и по усмотрению поставщика браузера.

Некоторые люди могут рассмотреть возможность использования предварительно заполненной части, как в <input type="url" value="http://">, но это имеет несколько проблем.Это означает установку недопустимого начального значения, что вызывает недоумение. Это также затрудняет пользователю использование метода копирования и вставки natural.

Вывод: если вы хотите получить URL-адрес от пользователя, вы должны ожидать, что он предоставит полный абсолютный URL-адрес.

источник

2014-09-11 16:02:29

Спасибо за ответ! Да, я знаю, что 'http: //' является частью протокола, но не префиксом. И я знаю, для чего он предназначен.Это также очень хороший отзыв о пользовательском интерфейсе, когда пользователь копирует URL-адрес страницы - я буду думать об этом, очень ценю :) Но в моем конкретном случае это поле предназначено для ввода URL-адреса своих собственных страниц. –

EDITED:

В данном случае вариантов не так много. У вас есть два варианта. Не используйте type = "url", который вы уже сказали, что вам нужно использовать. Или не проверить его с помощью этого метода:

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

Если вы абсолютно необходимо, чтобы подтвердить это, вы могли бы написать сценарий пользовательские проверки. или использовать что-то вроде JQuery Validate.

источник

2014-09-11 14:32:30 AlienDev

http://jsbin.com/yebetugibire Он встроен в браузер – Mardoxx

Я отредактировал свой ответ. Спасибо, Мардокс. – AlienDev

Может всегда удалять 'type =" url "' и помещать 'pattern = (? :(?: https?: \/\ /)? | (?: Www \.)) [- a-zA-Z0-9 @ :% ._ \ + ~ # =] {2256} \ [AZ] {2,4} \ Ъ (: [- A-Za-Z0-9 @:.?.?% _ \ + ~ # &/= ] *) ': P – Mardoxx

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

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

источник

2014-09-11 14:37:51

Это не проблема с браузером. Это проверка типа ввода HTML5. Есть два решения, которые вы можете реализовать. Вы можете использовать

<input type="url" novalidate="novalidate" />

Второй вариант заключается в добавлении HTTP использовать JavaScript: // в поле onsubmit, если она не существует. Я пытался заставить его работать с type="URL" onsubmit, но проверка HTML5 запускается перед JavaScript. Ваш лучший вариант, если вы хотите сохранить его таким образом, будет скриптом, выполняемым onkeyup: http://jsfiddle.net/gLN6X/1/ (опубликовано в https://stackoverflow.com/a/17947355/3869056)

Если вы можете покончить с типом, который не имеет проверки по умолчанию, вы можно использовать что-то вроде этого: http://jsfiddle.net/u958xwr5/1/

<html> 
<head> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script> 
    $(document).ready(function() { 
    $('#urlForm').submit(function() { 
    var url = $('#address'); 
    if(url.val().match(/^http:\/\//) == null) { 
     url.val("http://" + url.val()); 
    } 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <form id="urlForm"> 
    <input id="address" type="text" /> 
    <button type="submit">Submit</button> 
    </form> 
</body> 
</html>

JSFiddle имеет немного больше, чтобы показать, что после того, как исправление было сделано, он будет предоставить правильную информацию.

источник

2014-09-11 15:50:46

According to the OP, вопрос был решен с помощью атрибута HTML5 pattern с соответствующим регулярным выражением на <input>, например, так:

<input type="url" pattern="^[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$">

Я хотел бы добавить, что это не обязательно является лучшим решением. Трудно найти точное регулярное выражение, которое будет работать для всех каждый раз. Если вам нужно использовать такую явную проверку, я предлагаю вам послушать отзывы пользователей и при необходимости изменить регулярное выражение.

Лично я не делаю много проверки на входах в URL, таким образом, у пользователя будет свобода использования любого домена, а не только хорошего ol 'example.com. Кроме того, URL-адреса также могут быть в виде IP-адреса, например http://127.0.0.1/ или не иметь точки в них, например http://localhost/. Мне просто легче разрешить все, что пользователь вводит в текстовое поле, явно избегая значения по мере необходимости, если оно хранится в базе данных.

В качестве закрывающего слова я хотел бы указать на то, что вы не должны полагаться на компетенцию пользователей. Зачем? Ну, несмотря на то, что http://, находясь перед этим входом, ленивые люди (включая меня), вероятно, просто вставляют URL-адрес: CtrlC 'd из адресной строки браузера и забыть об удалении этого протокола с самого начала, надеясь что сайт автоматически сделает это для собственного удобства. Вы должны также учитывать это при создании проверки ввода, потому что это может отбросить некоторых людей, которые только что вставили действительный URL-адрес в ваш ввод, и он сообщает им, что это неправильно.

источник

2014-09-11 18:20:19 SeinopSys

Хм ... Мне не нужно проверять URL-адрес вообще. См. Вопрос: 'type = url' установлен, чтобы облегчить ввод данных для устройств Android/iOS. Весь процесс проверки выполняется на стороне сервера, и не стоит беспокоиться. И в этом конкретном случае 'google.co.uk' работает отлично - просто протестировал его. Но спасибо вам за ответ - это очень полезно. –

@ArtemUshakov Вы правы, я не заметил «.» В первой группе захвата, поэтому подобные поддомены должны работать действительно. – SeinopSys

Сделать Chrome не запрашивать «http: //» на входе

ответ

Смежные вопросы