Question

我想创建一个带下划线的输入。因此，当输入填充时，字符不应加下划线。空格和空格应加下划线。如果我不知道，我会举一个例子。

html，css或javascript中是否有任何解决方案？

<input style="letter-spacing:5px;" max-length="9" />

我的文字是;

U N D E R L I N E

U N D E R L _ _ _

U N _ E _ L I N E

Answer 1

这是一个使用多个输入的想法。使用PHP或其他任何东西，你可以把它拉成一个数组进行处理。

Have an example!

HTML

<input type="text" value="U" maxlength="1" disabled="disabled" />
<input type="text" value="" maxlength="1" />
<input type="text" value="" maxlength="1" />
<input type="text" value="E" maxlength="1" disabled="disabled" />
<input type="text" value="R" maxlength="1" disabled="disabled" />
<input type="text" value="L" maxlength="1" disabled="disabled" />
<input type="text" value="I" maxlength="1" disabled="disabled" />
<input type="text" value="" maxlength="1" />
<input type="text" value="E" maxlength="1" disabled="disabled" />

CSS

input {
    border: none;
    width: 1em;
    text-align: center;
    text-transform: uppercase;
}
input:focus {
    outline: none;
}
input[value=''] {
    border-bottom: solid 1px #000;
}

Answer 2

您应该使用javascript函数来获得所需的输出。我稍微修改了你的输入标签

<input style="letter-spacing:5px;" maxlength="9" onchange="decoration()" id="thisInput">

我的javascript函数是

function decoration() {
var x=document.getElementById("thisInput").value;
var y="";
for (i=0;i<9;i++) {
    if(x[i]==undefined||x[i]==" " )
    {
        y+="_";
    }
    else {
        y+=x[i];
    }
    }
    document.getElementById("thisInput").value=y;

}

如果为空，则下划线输入

2 个答案: