文本受它们占用的空间量限制

Question

有没有办法根据输入字段的大小限制可以放入输入字段的字母数量？

例如 W 和 M 占据了足够的空间来放置 34 个。

但如果我使用普通句子，与 W 和 M 相比，相同数量的字母只占用一半的大小。

我想要的是，只要输入字段的大小足够大，我基本上可以写任何东西。 这可能吗？

Answer 1

首先，您可以通过以下方式访问输入的大小：

const ele = document.getElementById('yourInputId');
const eleStyle = window.getComputedStyle(ele);
const inputSize = {width: eleStyle.width, height: eleStyle.heigth};

然后，在另一种方法中，假设您知道文本的字体和字体大小（如果不知道，请查看 Angular 文档），您可以设置这样的方法：

pixelLength(txt: string, font: number) {
  const canva = document.createElement('CANVAS');
  const attr = document.createAttribute('id');
  attr.value = 'myId';
  canva.setAttributeNode(attr);
  document.body.appendChild(canva);
  const c: any =  document.getElementById('myId');
  const ctx = c.getContext('2d');
  ctx.font = font.toString() + 'px Helvetica';
  const result = ctx.measureText(txt).width;
  document.body.removeChild(canva);
  return result;
}

您可能希望在自定义表单控件中调用此方法，以检查它是否比inputSize.width 长。

如果有什么不清楚的地方请告诉我;)

编码愉快。