Сделать только часть поля ввода не редактируемой

Я немного поработал в Интернете и еще не нашел конкретного ответа на этот вопрос. Возможно ли иметь текстовое поле с текстом по умолчанию, который не редактируется?Сделать только часть поля ввода не редактируемой

Например, скажем, мне нужен пользователь для ввода номера телефона. Что они видят:

Input Phone Number: ***-***-****

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

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

Вот некоторые фиктивный код, если вам это нужно, чтобы экспериментировать с:

<!doctype HTML> 
<html> 
<body> 
    <section> 
     <article> 
      <label>Phone Number Entry: </label> 
      <input type="tel" name="phone" placeholder="123-456-7890" 
             onkeypress='eval(event)' required/> 
      </article> 
    </section> 
</body> 
</html>

источник

2013-07-24 Baelix

Номера телефонов должны быть прочитаны разрешительно, что позволяет использовать разделители типа «-» и «», но не требует. Это создает проблемы для обработки данных, но это не создает проблему, описанную в вопросе. Не рекомендуется пытаться применять жесткий формат для ввода пользователем, особенно если формат не соответствует международной рекомендации МСЭ-Т (в качестве рекомендуемых разделителей используются пробелы, а не дефисы). –

входы не поддерживают отключение частичных областей. Вам нужно будет использовать onkeyup и некоторый код JavaScript, чтобы проверить окно ввода и заменить содержимое, если оно изменилось.

источник

2013-07-24 18:53:46

Просто предложение, но вы можете использовать 3 отдельных текстовых ввода для редактируемых областей и некоторый CSS, чтобы они отображались как один вход. И тогда, возможно, скрытый ввод, чтобы сохранить полную стоимость, это необходимо.

Альтернативой будет (вероятно, беспорядочное) решение JavaScript, где вы должны отслеживать нажатия клавиш и положение курсора.

источник

2013-07-24 19:25:01 rwalker

Это невозможно с использованием чистого HTML/CSS. Для этого вам понадобится Javascript. Есть некоторые хорошие JS-плагины, которые поддерживают эту функциональность. Обычно я работаю с meiomask или inputmask. У вас будет добавленная функциональность, ограничивающая пользователей только ввода чисел (или того, что вы хотите)

Они оба полагаются на jQuery, но вы можете не писать свое собственное решение в javascript, если вы к нему готовы.

Предлагаемый способ использования 3 разных входов и их стиль как один большой вход - не лучшее решение IMO. Пользователям придется переключать поля (с помощью мыши или вкладки), которые будут запутывать, потому что это похоже на одно поле. Ужасный UX! Вы можете добавить JS для автоматического переключения полей, но если вы собираетесь использовать JS, я бы выбрал маску ввода. И я еще не говорю о дополнительной работе, чтобы обработать 3 поля на стороне сервера ...

источник

2013-07-24 19:34:08 Pevara

Вы можете создать поддельный вход, подобный следующему:

<style> 
    .fakeInput{ 
     background-color:#FFFFFF; 
     border:1px solid #CCCCCC; 
     border-radius:5px; 
     padding:3px; 
     width:300px; 
    } 

    .fakeInput span{ 
     margin-left:10px; 
    } 
</style> 
<p class="fakeInput">Input Phone Number:<span contentEditable="true" onfocus="this.innerHTML=''">123-456-7890</span></p>

, а затем по щелчку на некотором элементе , прочитайте значение из DOM.

источник

2013-07-24 19:41:49

Сделать только часть поля ввода не редактируемой

ответ

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