输入字段的默认值导致对齐问题答案

【问题标题】：Default value of input field causes alignment problem输入字段的默认值导致对齐问题
【发布时间】：2022-02-13 20:29:23
【问题描述】：

我正在尝试构建一个计时器，并且我还特别尝试使用 SVG。我有一个输入字段的大小可能不正确，但我正在使用对齐来处理这个问题。但是，如果我输入默认值，甚至在页面加载后尝试使用 javaScript 设置值，我的代码似乎会中断。这不起作用，我无法在可见区域中输入。但是，如果我使用删除键删除已经存在的数据，或者我只是不输入默认值并键入值，则对齐似乎工作得很好。这是我使用默认值的代码：

body{
    background-color: black;
}
#input1, textarea{
    text-align: right;
    background-color: black;
    fill: black;
    padding: 0;
    border: none;
}

#input1 ,text{
    color: white;
}

<svg height="100vh" width="100vw">
        <circle r="25%" cx="50%" cy="50%" fill-opacity="100%" stroke="green" stroke-width="7"></circle>
            <!--TODO: add handling to button-->
        <foreignObject x="31.5%" y="42%" width="16%" height="16%" fill="black" stroke-width="0">
            <div xmlns="http://www.w3.org/1999/xhtml">
                <label>
                    <input id ="input1" style="font-size: 450%; color: white" maxlength="2" value="05">
                </label>
            </div>
        </foreignObject>
<svg>

在上面的代码中，如果您删除输入，对齐会自行修复，即使将来使用 javaScript 进行更新，它也会保持固定。

请以全页视图查看输出。发生这种情况有什么原因吗？我可以使用修复方法吗？

注意：该字段位于圆圈中心的左侧，因为它是黑色的，所以它不可见。

【问题讨论】：

标签： html css svg

【解决方案1】：

我不确定，但我认为导致输入字段中文本对齐问题的问题是由于 foreignObject 元素的 width 属性的值。

如您所见，input 元素的font-size 比foreignObject 可以容纳的要大得多。这就是为什么文本对齐方式很奇怪的原因。

所以基本上，我可以说input 字段中的值没有显示或错误对齐，因为foreignObject 元素的width 与font-size 的font-size 不成比例@元素，因此，它以某种方式“隐藏”。因此，我试图做的是弄乱foreignObject 元素中的width 属性。

原始值：
<foreignObject x="31.5%" y="42%" width="16%" height="100%" fill="black" stroke-width="0">

更改foreignObject的width属性后：
<foreignObject x="31.5%" y="42%" width="100%" height="100%" fill="black" stroke-width="0">

希望这至少能给你一点想法，以防它没有真正回答你的问题。

【讨论】：