kosyachniy
@kosyachniy
Python BackEnd, Web FullStack

Как в jQuery определить ширину текста внутри input?

Как с помощью JS / jQuery определить какой ширины (в пикселях) будет текст в <input>?
Если текста нет, то ширину placeholder?
  • Вопрос задан
  • 639 просмотров
Решения вопроса 2
@antpv
Держи функцию. Не уверен что правильно понял вопрос, функция возвращает длинну текста внутри input, а если его нет то длинну placeholder.

function getWidth(id) {
		let input = document.getElementById(id)
		let fontSize = getComputedStyle(input);
		let newSpan = document.createElement('span');
		newSpan.style.fontSize = fontSize;
		newSpan.style.margin = '0px';
		newSpan.style.padding = '0px';
		newSpan.innerHTML = input.value || input.getAttribute('placeholder');
		document.body.appendChild(newSpan);
		let width = newSpan.offsetWidth;
		newSpan.remove()
		return width;
	}

	let elem = document.getElementById('ID') //ID инпута
	let width = getWidth(elem) //переменная будет равна длинне в px
Ответ написан
Комментировать
kosyachniy
@kosyachniy Автор вопроса
Python BackEnd, Web FullStack
function getTextWidth(text, font) {
	var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
	var context = canvas.getContext("2d");
	context.font = font;
	var metrics = context.measureText(text);
	return metrics.width;
}

var text = $('input').val();
if (!text) text = $('input').attr('placeholder');

var width_text = getTextWidth(text, $('body').css('font'));
alert(width_text);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы