Вторник, 06 Ноября 2012 16:31

Определить ширину текста

Written by 
Оцени эту запись
(2 Голоса)

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

 

То есть, пользователь вводит текст в блок с contenteditable="true", пока не дойдет до конца блока.

 

Попробуйте ввести текст:

 

 

 

 

Когда доходите до конца блока, текст перестает появялться. Если же будете удалять буквы, сможете на их место ввести новые.

 

Метод решения:

 

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

 

В jQuery есть замечательный метод wrap(), которым мы может обернуть элемент. В JavaScript такого счастья нету. Потому делаем это же немного сложнее. Создаем в документе элемент span, в него записываем содержимое нашего блока, из блока все удаляем и span в него вставляем:

 

 

div = document.getElementById('editable');
span = document.createElement('span');
if (div.innerHTML != '') {
     span.innerHTML = div.innerHTML;
} else {
     span.innerHTML = '  ';
 }
div.innerHTML = '';
div.appendChild(span);

 

Если блок пустой, вставляем в него пробел. Иначе у меня не получилось. Если же в блоке изначально есть какой-то текст ("Введите текст"), все будет отлично даже так:

 

span.innerHTML = div.innerHTML;

 

Далее нам осталось проверить, не превышает ли ширина span'а ширину блока. Если да, то делаем e.preventDefault() на keypress:

 

 

div.addEventListener('keypress', function(e){
     if(span.offsetWidth > div.offsetWidth-10) {
             e.preventDefault();
     }
});

 

Не забудьте, что сам блок должен иметь атрибут contenteditable="true" и у него должен быть id, к которому можно обратиться.

 

Теперь приведу весь код:

 

 

    <div id="editable" contenteditable="true"></div>
    <style>
        #editable {
            width: 200px;
            height: 30px;
            background: #eee;
            border: 1px solid blueviolet;
            color: blueviolet;
            margin: 20px;
            line-height: 30px;
        }
    </style>
    <script>
        document.body.onload = Editable;
        function Editable() {
            var div, span;
            div = document.getElementById('editable');
            span = document.createElement('span');
            if (div.innerHTML != '') {
                span.innerHTML = div.innerHTML;
            } else {
                span.innerHTML = '&nbsp; ';
            }
            div.innerHTML = '';
            div.appendChild(span);
            div.addEventListener('keypress', function(e){
                if(span.offsetWidth > div.offsetWidth-10) {
                    e.preventDefault();
                }
            });
        }
    </script>

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов