Как предотвратить текст внутри ввода от переопределения

Question

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

Способ поиска заключается в том, что рядом с текстом, введенным во вход, имеется дополнительное текстовое поле, которое представляет текущий индекс общего числа. Также стоит заметить, что выделенная граница имеет весь вход (включая введенный текст и индекс и общее количество). Кроме того, при вводе длинного текста индекс и суммарный сумматор (например, 0 из 10) не становятся переопределенными, а сам текст прокручивается.

Есть ли у кого-нибудь простой подход для реализации этого набора функций?

Answer 1

Я сделал основание его только с помощью CSS см демонстрационного следующим образом.

jsfiddle

* { 
 
    box-sizing: border-box; 
 
} 
 
div { 
 
    position: relative; 
 
    width: 10em; 
 
} 
 
input { 
 
    width: 100%; 
 
    padding: 4px; 
 
    border: 1px solid; 
 
    padding-right: 52px; 
 
} 
 
span { 
 
    display: block; 
 
    border-left: 1px solid; 
 
    width: 50px; 
 
    text-align: center; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 2px; 
 
}

<div><input type="text"><span>etc</span></div>

Answer 2

Простой Подход будет добавлять отступы к входу, и позиционируют текст, который вы хотите сохранить над ним. Переписывание значения ввода с помощью pogramming.

HTML

<div class="form-text"> 
    <input type=text placeholder="0 of 0" id="youridhere"/> 
    <label for="youridhere" class="static-value">Get this label to appear</label> 
</div> 

CSS

.form-text{ 
    position:relative; 
} 
input{ 
    padding:5px 5px 5px 150px; 
} 
.static-value{ 
    position:absolute; 
    left:10px; 
    font-size:0.85em; 
    top:9px; 
} 

Pen of it working

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

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

-------- Редактировать --------

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