Отключить редактирование значения по умолчанию для ввода текста

У меня есть форма поиска

<input id="price_from" value="price from ">
<input id="price_to" value="price to ">
<button>search</button>

Как отключить редактирование текста dafault? Когда пользователь начинает вводить цену, невозможно изменить "цена от" и "цена до", но они остаются в поле ввода. Я пробовал разные плагины маски для jquery, но они не отображали текст по умолчанию, пока вы не сосредоточились на поле, и не предоставляете опцию для пользовательского текста. Только заполнители символов.

Ответы

Ответ 1

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

<input id="price_to" value="price to" readonly="readonly">
<input id="price_to" value="price to" disabled="disabled">

Ответ 2

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

<input disabled="disabled" id="price_from" value="price from ">

Ответ 3

Как насчет disabled=disabled:

<input id="price_from" value="price from " disabled="disabled">​​​​​​​​​​​​

Проблема в том, что вы не хотите, чтобы пользователь их редактировал, зачем отображать их во вводе? Вы можете скрыть их, даже если хотите отправить форму. И для отображения информации просто используйте другой тег.

Ответ 4

Возможно, из-за того, что я не мог хорошо объяснить, вы действительно не понимаете мой вопрос. В общем, я нашел решение.

Извините за мой английский

Ответ 5

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

Пример такого подхода:

<div style="border:1px solid gray; color:#999999; font-family:arial; font-size:10pt; width:200px; white-space:nowrap;">Default Notes<br/>
<textarea style="border:0px solid black;" cols="39" rows="5"></textarea></div>

Другой подход, который я в конечном итоге использую, использует JS и JQuery для имитации функции "Отключить". Пример с псевдокодом (не может быть конкретной причиной юридической проблемы):

  // disable existing notes by preventing keystroke
  document.getElementById("txtNotes").addEventListener('keydown', function (e) {
    if (cursorLocation < defaultNoteLength ) {
            e.preventDefault();
  });

    // disable existing notes by preventing right click
    document.addEventListener('contextmenu', function (e) {
        if (cursorLocation < defaultNoteLength )
            e.preventDefault();
    });

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