Наличие постоянного значения в поле ввода при возможности добавления к нему текста

Question

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

Если у вас есть идеи, как это сделать, дайте мне знать, пожалуйста, это мне очень поможет.

РЕДАКТИРОВАТЬ: я использую HTML-формы.

Answer 1

Вы можете расположить текст поверх поля ввода, чтобы он выглядел так, как будто он внутри него. Примерно так:

<input type="text" name="year" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">19</span>

Таким образом, ваше поле ввода будет начинаться с «19», которое не может быть отредактировано, и пользователь может добавить информацию за этим.

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

Возможно, вам придется поиграть с полем слева от диапазона, в зависимости от остальной части вашего CSS.

Затем также добавьте pedding-left в поле ввода, чтобы убедиться, что пользователь начинает печатать после вашего текста, а не под ним.

шрифт: унаследовать должен убедиться, что ваш текст и текст, набранный пользователем, имеют один и тот же шрифт.

И если вы хотите поместить что-нибудь справа от этого поля ввода, добавьте margin-right к диапазону с вашим текстом, так как в противном случае другой контент может начать работать и над вашим полем ввода.

Answer 2

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

, как иногда используется для даты рождения (хотя, может быть, больше нет ...)

birthyear: 19[input field]

edit:

с некоторыми javascript-компонентами, вы можете реализовать что-то наподобие того, о котором вы просили, хотя поле ввода с текстом и перехватывать нажатия клавиш в этом поле, позволяя только некоторым после того, что вы хотите, всегда быть там- но, ну, вам нужно использовать js .. и если это только для этого, я бы сказал, что это не обязательно

edit:

, если вы хотите использовать трюк только дляДля просмотра можно использовать фоновый рисунок / стиль рамки, который окружает текст и поле ввода, что делает его похожим на текст и ввод - это одно и то же поле ввода.

Answer 3

Я придумал это: `` `

if (e.target.value == '' || e.target.value.length <= 3) {
   e.target.value = '+91-';
}

` ``

Answer 4

Основная проблема заключается в определении положения курсора. Это можно сделать, например, используя следующую функцию :

function getCaret(el) {
    var pos = -1; 
    if (el.selectionStart) { 
        pos = el.selectionStart;
    } 
    else if (document.selection) { 
        el.focus();         
        var r = document.selection.createRange(); 
        if (r != null) { 
            var re = el.createTextRange(); 
            var rc = re.duplicate(); 
            re.moveToBookmark(r.getBookmark()); 
            rc.setEndPoint('EndToStart', re);       
            pos = rc.text.length; 
        }
    }  
    return pos; 
}

Теперь вы можете установить обработчик событий для нажатия клавиши и проверить, была ли нажатая клавиша внутри неизменяемой части значения текстовой области. Если он был там, обработчик события возвращает false, в противном случае - true. Это поведение можно обернуть в простой объект:

function Input(id, immutableText) {
    this.el = document.getElementById(id);
    this.el.value = immutableText;
    this.immutableText = immutableText;
    this.el.onkeypress = keyPress(this);
}    
function keyPress(el) {
    return function() {
        var self = el; 
        return getCaret(self.el) >= self.immutableText.length;
    }
}    
Input.prototype.getUserText = function() {
    return this.el.value.substring(this.immutableText.length);
};
var input = new Input("ta", "Enter your name: ");
var userText = input.getUserText(); 

Вы можете проверить это на jsFiddle (используйте Firefox или Chrome).

Answer 5

Может быть, вы хотите меню select?

<select name="mySelectMenu">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
</select>

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

Кроме того, вы можете использовать select и a text.

Answer 6

Похоже, вы хотите заполнитель текста. В HTML5 вы можете установить атрибут placeholder для любого элемента input. Это будет работать в современных браузерах.

<input type="email" placeholder="jappleseed@appletree.com" name="reg_email" />

Теперь для старых браузеров это не будет работать. Вам потребуется альтернатива JavaScript для обеспечения того же значения пользовательского интерфейса.

Это может работать для всех браузеров:

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">

но это не рекомендуется, потому что есть лучший способ (на самом деле, это комбинация первых двух подходов): использовать разметку HTML5 для новых браузеров; jQuery и modernizr для старых браузеров. Таким образом, вы можете иметь только один набор кода, который будет поддерживать все пользовательские случаи.

Взят прямо с webdesignerwall.com :

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}

</script>

[Вам потребуется установить jquery.js и modernizr.js в ту же папку, что и ваша веб-страница.]

Примечание: у меня есть ощущение, что немного больше исследований может показать, что модернизатор вообще не нужен для этого, хотя я могу ошибаться по этому конкретному вопросу.