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

Question

[Алексей Полоз]

Как с помощью JS / jQuery определить какой ширины (в пикселях) будет текст в <input>?
Если текста нет, то ширину placeholder?

Answer 1

[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

Answer 2

[Алексей Полоз]

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);

Comments

[Stalker_RED]

canvas хоть зачем?