HTML - Undeletable placeholder в элементе ввода

Question

У меня есть поле URL в моей форме. Для этого валидатор должен иметь перед собой http://, , который, как я думаю, многие люди не поймут.

Могу ли я иметь «заполнитель», который пользователь не может удалить или написать перед ним?

Пример: HTTP: // myinputhere.com

<input type="url" placeholder="http://">

Answer 1

Заполнитель не сцепить placeholder текст, вводимой пользователем текста, это просто для информации, которую вы хотели бы предоставить ваш пользователи, как некоторые программисты не используют label вместо этого они пишут placeholder, например

<input type="text" placeholder="Enter Username Here" /> 

Так вот у НУ может сделать это, либо вы можете иметь предустановленный http:// значение ..

<input type="url" value="http://" /> 

Или вы можете использовать JavaScript или JQuery для клиента проверки на стороне вместо HTML5 type="url", который даст смысл только для вашей семантики, но вы не можете полагаться только для проверки HTML5.

---

Кроме того, если вы хотите сохранить вашу семантику, используя type со значением search или url, чем вы можете отключить проверку HTML5, используя novalidate атрибут для form тега.

ИЛИ

Вы можете использовать несколько поле, один с type набором для url и других к text и вы можете объединить оба значения поля ..

input[type=url] { 
    width: 40px; 
} 

<input type="url" value="http://" readonly /> 
<input type="text" /> 

Demo

---

Примечание. Использование проверки на стороне клиента, например, HTML 5 и JavaScript могут быть легко отключены вашими пользователями, я бы порекомендовал вам иметь сервер боковая проверка, если это имеет к вам большое значение. Но полагаться на клиента боковая проверка ТОЛЬКО не очень хорошо.

Answer 2

Почему бы вам не использовать javascript для этого. Я предполагаю, что у вас есть какие-либо HTML-тег, как этот

<input id="test" type="url" onclick="testJS()" placeholder="http://"> 

и попробовать этот следующий JavaScript

function testJS(){ 
    var a = document.getElementById("test"); 
    a.value = "http://"; 
} 

Answer 3

Вы можете использовать Javascript и JQuery, чтобы сделать это.(До сих пор в поисках решения)

Или вы можете поставить HTTP: // текст в текстовом поле с:

<input type='url' value='http://'> 

Или вы можете добавить текст перед текстовым полем, а затем принимать входные данные быть без HTTP: // текст

<p style='display: inline-block'>http://</p><input type='url' style='display: inline-block'> 

Вы также можете использовать позиционирование CSS, чтобы показать поверочный элемент на поле ввода, а затем добавить отступы в поле ввода так, что пользовательский ввод не будет идти над элемент span.

Answer 4

Вы можете отобразить поверочного элемент над входом, как это:

HTML:

<div class="wrapper"> 
    <input type="url" /> 
    <span>http://</span>  
</div> 

CSS:

.wrapper { 
    position: relative; 
} 
input { 
    padding-left: 48px; 
} 
.wrapper span { 
    position: absolute; 
    left: 2px; 
} 

Example

Answer 5

Нет, вы не можете иметь начальное содержание которые не могут быть удалены.

Вопрос подразумевает неправильный подход, поскольку a) пользователи могут нуждаются в для удаления http: // например. если им нужно ввести https: URL, b) заполнители не предназначены для этого, c) если вы используете value="http://", это не значимое значение по умолчанию, и оно делает контроль изначально недействительным, d) если вы используете type="url", то вы - запросив для элемента управления, который принимает абсолютный URL как значение и оставляет его в браузерах для его реализации.

Что вы можете сделать, чтобы помочь пользователям, которые не знают, как ввести абсолютный URL, чтобы использовать атрибут title, который имеет специальную функцию в контексте, как это: его значение будет появляться сообщение об ошибке отображается браузером, если пользователь пытается отправить форму, когда значение управления недействительно. Пример:

<input type="url" title="An absolute URL (usually starts with http://)">