Question

当输入的宽度小于内部值时，只显示值的开头。通过使用箭头键（左和右），我们可以将插入符号移动到值的隐藏部分。在这种情况下，值在输入内部移动，以便可以看到包围插入符号的值的一部分。

我想确定可见部分从初始位置移动了多少像素。是否有任何简单的方法可以获得此值而不会在每个键盘事件上监视插入符的位置？

Answer 1

您可以根据元素值的长度设置size的{{1}}属性。

这样的事情：

<input />

document.getElementById('input').addEventListener('keyup', function(evt){
	this.setAttribute('size', evt.target.value.length)
})

Answer 2

我使用此函数来确定字符串的像素长度（通过近似）。但浏览器在滚动文本方面有所不同。 EDGE滚动大约三个字符，而Chrome仅滚动一个。

function getPixelLengthOfString(element, string) {
  var tempNode = document.createElement("span");
  tempNode.innerHTML = string;
  tempNode.style.fontSize = window.getComputedStyle(element,null).getPropertyValue("font-size");
  document.body.appendChild(tempNode);
  var stringPixelLength = tempNode.offsetWidth;
  document.body.removeChild(tempNode);
  return stringPixelLength;
}

console.log(getPixelLengthOfString(document.querySelector("input.length"), "wmj")); //approximate length of three characters

input.length {
  width: 50px;
}

<input type="text" class="length" value="this has a very long length" />

如何确定文本输入的价值转移？

2 个答案: