Question

给定固定的像素宽度（文本需要适合80px按钮;假设没有填充），如何将用户输入文本字段的文本限制为该限制（80px）。如果它有帮助，我知道字体（Arial）和字体大小（12pt）。

应该实时强制执行限制（用户应该能够删除和添加文本而不提交）。

例如，文本字段应该允许用户输入4“W”或9“I”，只要它在80px下输入。

Answer 1

您可以使用画布来测量像素完美的宽度。只需创建一个包装器对象来进行测量（因此您不必每次都重新创建画布）：

＆＃13;

function Measure(font) {
  this.canvas = document.createElement("canvas");
  this.ctx = this.canvas.getContext("2d");
  this.ctx.font = font;

  // method to call to measure width in pixels
  this.getWidth = function(txt) {
    return this.ctx.measureText(txt).width
  };
}

// set up a global instance
var m = new Measure("12pt sans-serif");

// get funky
document.querySelector("input").onkeyup = function() {
  var w = Math.ceil(m.getWidth(this.value)); // round up in case of float
  document.querySelector("span").innerHTML = w;
};

＆＃13;

<input style="font:12pt sans-serif"> <span>0</span>

＆＃13;

Answer 2

可能你需要像text.width（）

这样的东西

var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px";

Answer 3

我认为该代码可以帮助您：

#id {
    width: ;
    height: ;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Answer 4

在这里抛出一个想法但是，为什么不使用Monospace字体？由于等宽字体字符都是固定宽度，给定字体大小，一些实验和稍后的一些数学，您可以使用字符数将输入限制为80px。

如何按像素宽度限制输入的文本，而不是字符数

4 个答案: