Javascript 输入中的字符在其上等距排列'；全宽

我有一个输入字段和maxLength值，我想将输入字段划分为maxLength的相等虚拟框，以便每个框包含一个字母

例如，如果我的maxLength值为10，输入宽度为100px，我想将这10个字符分布在整个输入宽度上，所需结果如下所示

---

|H | e | l | l | o | w | o | r | l | d| 我决定使用下面的代码并添加css letterSpacing属性，根据字符W（因为它是最宽的字符）计算字母间距，但这并没有给出准确的结果

enter code here

function calculateLetterSpacing(fontInfo, width, maxLength) {
  const inputWidth = width;
  const span = document.createElement('span');
  span.innerText = "W";
  span.style.fontSize = fontInfo.fontSize;
  span.style.fontFamily = fontInfo.fontName;
  document.body.appendChild(span);
  const charMaxWidth = span.offsetWidth;
  return (inputWidth - charMaxWidth*maxLength)/maxLength;
}

是否有任何直接css属性允许我这样做

---

p.S字体可以是任何字体，它不是单间距的。

没有直接的css属性可以做到这一点，但是我让你的函数工作起来了。单击底部的“运行代码片段”，并查看代码中的注释以获取解释

var inputfield=document.getElementById（“inputfield”）；//输入字段
var temp=document.getElementById（“temphidden”）；//隐藏的跨度
var fontsizeOption=document.getElementById（“fontsize”）；//字体大小下拉列表
var fontname option=document.getElementById（“fontname”）；//字体名称下拉列表
var widthOption=document.getElementById（“inputwidth”）；//输入字段宽度的下拉列表
var lengthooption=document.getElementById（“maxlength”）；//maxLength下拉列表
//出于演示目的，请从下拉列表中获取初始值
var w=parseInt（widthOption.options[widthOption.selectedIndex].value）；//初始化宽度
var m=parseInt（lengthOption.options[lengthOption.selectedIndex].value）；//初始化maxLength
var f={//初始化fontInfo对象
fontSize:fontsizeOption.options[fontsizeOption.selectedIndex].value，
fontName:fontnameOption.options[fontnameOption.selectedIndex].value
}; 
计算行距（f，w，m）；//初始化属性
函数calculateLetterSpacing（fontInfo、width、maxLength）{
变量输入宽度=宽度；
//设置输入字段的宽度
inputfield.style.width=inputWidth+“px”；
//设置输入字段和隐藏跨距中的字体大小
inputfield.style.fontSize=temp.style.fontSize=fontInfo.fontSize；
//设置字体名称-两个位置
inputfield.style.fontFamily=temp.style.fontFamily=fontInfo.fontName；
//设置输入字段中允许的最大字符数
inputfield.maxLength=maxLength；
//将输入字段的内容复制到隐藏范围中
temp.innerHTML=inputfield.value；
//当输入每个字符时，隐藏范围的大小会增加，
//因此，跨度的宽度（以像素为单位）=宽度（以像素为单位）
//输入字符串的名称；计算空白
var whiteSpace=parseInt（inputfield.style.width）-temp.clientWidth；
//在键入文本之前，长度为0，因此请检查此项
如果（temp.innerHTML.length==0）{return；}
//将空格除以numChars得到字母间距的大小
inputfield.style.letterSpacing=（空格/temp.innerHTML.length）+“px”；
//焦点回到输入字段
inputfield.focus（）；
}

body{font:14px arial；文本对齐：居中；}
#输入字段{
左侧填充：1px；
文本对齐：居中；
显示：块；
保证金：0自动20px自动；
线高：30px；
}
.selectwrapper{/*选择框仅用于示例目的*/
显示：块；
利润率：10px自动；
宽度：110px；
}
.select包装器选择{
宽度：100%；
字体：18px arial；
高度：30px；
}

在…中键入某物

字体大小
8px
12px
18px
24px
字体名称
时代
Arial
威尔达纳
信使
宽度
80px
100px
150像素
220像素
最大长度
7.
10
15
24

这是一个简单的解决方案，可以完美地工作，只需对其进行测试。让flexbox为您完成工作，它是您要求的CSS工具。将其粘贴到HTML文件中，保存并在浏览器中打开，它将在屏幕上平均分隔您输入单词variable的字母数量

let lettersHTML=“”；
//定义这个词
让word=“thing”；
//分开
let split=单词split（“”）；
//这会把你的单词分成[“t”，“h”，“i”，“n”，“g”]
//在每个字母上使用for循环进行迭代
对于（设i=0；i的可能副本）