html - 文本受其占用空间的限制

有没有一种方法可以限制输入字段中可输入的字母的数量，具体取决于它占用的大小？

例如，W和M占用足够的空间来放置其中的34个。



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



我想要的是，只要inputfield的大小足够大，我基本上就可以写任何东西。
那可能吗？

最佳答案

首先，您可以使用以下命令访问输入的大小：

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。

让我知道是否不清楚；）

快乐的编码。

关于html - 文本受其占用空间的限制，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59410841/