Javascript，为带有下标和上标的文本字段创建模板

Javascript, creating a template for a textfield with subscript and superscript

本文关键字：文本 字段 创建 建模 上标 下标 Javascript      更新时间：2023-09-26

我对 JavaScript 相当陌生。在我对一些示例代码的实验中，我创建了一个包含表格的 html 文件。在其中一个表数据字段中，我有一个文本类型字段。有没有办法制作一个按钮，插入一个允许操作的预定义模板？又名我按下一个按钮"钱"，该按钮将额外的格式化文本输入到"$0.00"。

所以例如 

function input_button(){
    var template = "$0.00"
    var my_txt = document.getElementById("money");
    my_txt.value += Template;

附带说明一下，如果我想使用下标和上标怎么办？我尝试使用 .sup（） 和 .sub（） 方法，但它只是插入标签，不会改变文本的美感。 （所以在表中，它看起来像

 <sub> things to be subscript </sub>

反对 要下标的东西

我不熟悉任何模板文本格式的方法，因此您可能只需要在逻辑中进行硬编码。至于你的第二个问题，当你使用 .sup 和 .sub 方法时，你是否在内部 html 中插入结果？例如：

function helloWorldSuper(){
    var str = "Hello World";
    var result = str.sup();
    document.getElementById("tableCell").innerHTML = result;
}

要将掩码应用于输入字段以便使用模板自动格式化值，您需要收听输入按键事件并根据掩码进行处理。有一些脚本已经这样做了，比如jQuery的屏蔽输入插件。

如果您希望输入文本仅将$0.00作为初始值，则很容易做到。您可以通过JavaScript创建行并将其插入表中，如下所示：

<html>
    <body>
        <button id="insertRowButton">Insert</button>
        <table>
            <thead>
                <tr><th>Text</th><th>Input</th></tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
        <script>
            (function() {
                // Elements used
                var tableBody = document.getElementById('tableBody'),
                    insertRowButton = document.getElementById('insertRowButton');
                // Create a new row template
                function createRow() {
                    var tr = document.createElement('tr'),
                        tdText = document.createElement('td'),
                        tdInput = document.createElement('td'),
                        sub = document.createElement('sub'),
                        input = document.createElement('input'),
                        text = document.createTextNode('This is a text node '),
                        subscriptText = document.createTextNode('with subscript');
                    sub.appendChild(subscriptText);
                    tdText.appendChild(text);
                    tdText.appendChild(sub);
                    input.value = '$0.00';
                    tdInput.appendChild(input);
                    tr.appendChild(tdText);
                    tr.appendChild(tdInput);
                    return tr;
                }
                // Insert a new row into table
                function insertRow() {
                    var tr = createRow();
                    tableBody.appendChild(tr);
                }
                // Bind events
                insertRowButton.addEventListener('click', insertRow);
            }());
        </script>
    </body>
</html>

这是JSFiddle：http://jsfiddle.net/ck7qargw/

我有点困惑，但我假设您正在尝试通过 innerHTML 添加 sup/sub 脚本？

var template = "<span class='supStyle'>$0.00</span>"

.CSS：

.supStyle{vertical-align:top;font-size:smaller;}

或者，您可以使用 forloop：

mySup = document.getElementsByClassName("supStyle");
for (var i=0;i<mySup.length;i++)
{
mySup[i].style.verticalAlign = "sub";
mySup[i].style.fontSize = "smaller";
}
相关文章：