根据元素宽度向javascript字符串添加空格

Add spaces to javascript string depending on element width

本文关键字：javascript 字符串 添加 空格 元素      更新时间：2023-09-26

我有一个表单，可以将用户添加到2个文本框（姓氏和名字）中的选择列表中。

当我点击"+"按钮时，它会在下面的select元素中添加一个具有指定姓氏和名字的选项。现在，它添加了姓氏和名字之间只有一个空格的选项，但我希望名字与上面的"名字"文本框对齐。

下面是我的示例代码：http://jsfiddle.net/fx37j71s/12/

<table>
<tr>
    <td>Last Name</td>
    <td>First Name</td>
</tr>
<tr>
    <td><input type="text" id="txtlastname" /></td>
    <td><input type="text" id="txtfirstname" /></td>
    <td><input type="button" value="+" onclick="addemployee();" /></td>
</tr>
<tr>
    <td colspan="2"><select id="lbxname" size="5" style="width:500px"></select></td>
    <td valign="top"><input type="button" value="-"onclick="removeemployee();" /></td>
</tr>
</table>

以及addemployee（）函数：

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');
    var text = document.createTextNode(lastname.value + ' ' + firstname.value);
    option.appendChild(text);
    select.appendChild(option);
}

有没有一种方法可以在JS、jquery或CSS中实现这一点？我尝试添加固定数量的空格减去姓氏中的字符数量，但字符串的实际宽度取决于字符（即"PPPPP"比"lllll"宽，尽管它们都有5个字符）。我还找到了"clientWidth"属性，但似乎无法使其正常工作。

谢谢：）

节点可以设置innerHTML 而不是创建文本

类似于：

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   

    option.innerHTML = padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}

function padStr(str){
    while(str.length < 500){
        str += '&nbsp;';
    }    
    return str
}

DEMO

根据charlietfl的回答和Evilzebra的评论，这对我来说很有效：

更新的小提琴：http://jsfiddle.net/vcfpd450/2/

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   

    option.innerHTML=padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}

function padStr(str){
    var x = str.length;
    while(x < 31){
        str+='&nbsp';
        ++x;
    }    
    return str;
}

CSS：

#lbxname
{
    font-family: monospace;
}

基本上，我在字符串中添加空格，直到达到所需的宽度（在本例中为31）。使用单空格字体系列可以确保宽度与字符数一致。

相关文章：