文本受其占用空间的限制

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 Documentation），可以设置如下方法：

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。

让我知道是否不清楚；）

快乐的编码。