Идея взята отсюда: копируем текст в элемент, который меняет свои размеры в зависимости от текста. Дальше находим размеры этого элемента и сдвигаем наш "плюсик" на нужное кол-во пикселей.
-1- Создаем элемент, который будет использован для определения размеров текста:
<span id="ruler"></span>
и задаем ему стили:
#ruler {
visibility: hidden;
white-space: nowrap;
position: absolute;
}
visibility: hidden;
используется для того, чтобы наш вспомогательный элемент, с одной стороны, не был виден, а с другой стороны - для того, чтобы он в зависимости от контента менял свои размеры (чего нельзя было бы добиться при display: none
)
white-space: nowrap;
используется для того, чтобы весь текст был в одну строку (без переносов). Соответственно при получении размеров элемента мы получим ширину всего текста, а не его части.
position: absolute;
используем для того, чтобы наш элемент никаким образом не влиял на расположение остального контента.
-2- Определяем функцию вычисления длины текста:
Для того, чтобы определить длину текста (в пикселях, а не в символах), необходимо вставить наш текст в созданный раннее элемент и получить его offsetWidth
.
Для этого есть несколько способов. Мы воспользуемся методом, предложенным в статье: определим для строк функцию visualLength
, которая будет совершать все необходимые действия:
String.prototype.visualLength = function() {
var ruler = document.getElementById('ruler');
ruler.innerHTML = this;
return ruler.offsetWidth;
}
Теперь получить длину текста можно будет так: "mystring".visualLength()
-3- Переместим "плюсик" на нужное место:
Поскольку мы теперь знаем длину текста, то сдвинув наш "плюсик" на нужное кол-во пикселей мы получим желаемый результат.
Вопрос только - как сдвигать? Поскольку у вас для "плюсика" используется input
то сдвигать его изменяя left
не получится - input
, его содержащий, визуально будет выделяться. Для того, чтобы input
никуда не съезжал, можно менять его padding-left
- тогда и input
на месте, и текст сдвинется.
Но мы сделаем немного по-другому: для syntax
используем div
. Тогда можно будет смело менять его left
-положение и при большом отступе он не исчезнет где-то за пределами элемента.
Таким образом мы получили нашу измененную функцию:
function action() {
var text = document.getElementById('txt');
var syntax = document.getElementById('syntax');
syntax.style.left = text.value.visualLength() + 'px';
}
-4- Компонуем все вместе:
Код мы получили, но толку от него пока еще мало: при изменении текста наш "плюсик" со временем скроется под текстом.
Почему? Ведь вроде все же сделали правильно?
А дело в том, что при вычислении длины текста в пикселях мы не учитывали размер и стиль шрифта. Т.е. в нашем элементе ruler
использовался один шрифт, а в input
был использован другой шрифт.
Поэтому необходимо либо программно, либо через css
задать этим элементам одинаковые стили:
input, #ruler, #syntax {
font-size: 20px;
font-family: Arial;
}
Тогда ширина текста в одном элементе будет равна ширине текста в другом элементе.
Результат
В итоге мы получили следующее:
String.prototype.visualLength = function() {
var ruler = document.getElementById('ruler');
ruler.innerHTML = this;
return ruler.offsetWidth;
}
function action() {
var text = document.getElementById('txt');
var syntax = document.getElementById('syntax');
syntax.style.left = text.value.visualLength() + 'px';
}
document.getElementsByTagName('button')[0].onclick = action;
action();
#wrap{
position: relative;
height: 38px;
}
#txt {
background: transparent;
}
input {
position: absolute;
border: 1px solid #A5C7FE;
box-sizing: border-box;
width: 500px;
border-radius: 5px;
background-repeat: no-repeat;
outline: none;
padding: 5px;
}
#syntax{
position: absolute;
color: #bbb;
padding: 5px;
}
input, #ruler, #syntax {
font-size: 20px;
font-family: Arial;
}
#ruler {
visibility: hidden;
white-space: nowrap;
position: absolute;
}
<div id="wrap">
<span id="ruler"></span>
<div id="syntax">+</div>
<input type="text" id="txt" value="0000" />
</div>
<button>ACTION</button><br>
font-family: monospace
, тогда все нормально будет – BOPOH 5 апр '15 в 15:32