input type = "url" для относительных URL

Question

У меня было поле ввода для пользователей, чтобы ввести пользовательскую ссылку на страницу из формы создания (что-то похожее на Wordpress). (например, about/awards, который используется для http://site.com/pages/about/awards) В какой-то момент это перестало работать в Chrome, поскольку теперь они проводят более строгую проверку поля input type="url". Что было бы хорошо, но:

• Это не позволяет относительные URL. about / awards - это относительный URL, но Chrome, похоже, отклоняет все, кроме абсолютных URL http://domain/page/stuff
• Ошибка не особенно очевидна. Он просто фокусируется на поле формы (что не особенно заметно) и отказывается отправлять форму. Я получил отчет о том, что форма «не работает», поскольку они не заметили, что происходит, и мне потребовалось несколько минут, чтобы понять, что происходит.

Я исправил это, просто переключившись обратно к типу ввода type = "text", но это побеждает некоторые полезные вещи, которые добавил type="url" (например, специальную клавиатуру на iPhone).

Это часть спецификации HTML5 или проблема в реализации Chrome?

Answer 1

В нем говорится: «Хотя значение элемента не является допустимым абсолютным URL-адресом, элемент страдает от несоответствия типов».

Answer 2

Спецификация все еще разрабатывается, но из этой цитаты может показаться, что это может быть проблемой с реализацией Chrome (жирный акцент - мой):

Пользовательские агенты могут разрешать пользователю устанавливать значение строки, которая не является действительный абсолютный URL , но может также или вместо этого автоматически сбежать символы, введенные пользователем, чтобы значение всегда является действительным абсолютным URL (даже если это не факт значение, увиденное и отредактированное пользователем в интерфейс). Пользовательские агенты должны позволить пользователю установить значение на пустой строки. Пользовательские агенты не должны позволяют пользователям вставлять U + 000A LINE FEED (LF) или U + 000D ВОЗВРАТ ПЕРЕВОЗКИ (CR) символов в значение.

Источник

Answer 3

Правдоподобный семантический обходной путь, который я использую, заключается в разрешении относительных URL-адресов с использованием атрибута pattern:

<input required="required" type="url" pattern="(https?|/).*?" name="sStyleBackgroundImageURL" value="{!sStyleBackgroundImageURL}"></input>