Destio небольшой блог

Как измерить ширину поля с текстом в JavaScript

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

Наверное во всяких библиотеках есть встроенные функции для этого, но в чистом JavaScript придется пойти немного стороной. Жабаскрипт может мерять ширину текста у объектов Canvas, поэтому мы как раз создадим такой объект, скопируем в него введенный в input текст, подставим нужный шрифт с нужным размером. И померяем ширину этого Canvas, которая будет примерно равна ширине нашего текста в поле.

Следующая функция может худо-бедно измерить ширину поля:

function calculateWidth(toCalculateWidth) {
    var inputValue = toCalculateWidth.value; // текст который нужно измерить
    var tmpCanvas = document.createElement("canvas");
    var tmpContext = tmpCanvas.getContext('2d');
    var inputFontSize = window.getComputedStyle(toCalculateWidth).fontSize; // узнаем размер шрифта
    var inputFontFamily = window.getComputedStyle(toCalculateWidth).fontFamily; // и гарнитуру
    tmpContext.font = inputFontSize + " " + inputFontFamily;
    var textWidth = tmpContext.measureText(inputValue).width; // ширина, в пикселях
    console.log("Ширина текста: " + textWidth)
}

Тип поля только input, textarea тоже померяет, но только если там влезет в одну строку, иначе будет некорректно.

Ярлыки: ,


Ближайшие сообщения:

Похожие сообщения:

Комментарии к этой записи отключены.