Question

我对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>

反对 _{要下标的东西}

Answer 1

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

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

Answer 2

我有点困惑，但我假设你试图通过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";
}

Answer 3

要将遮罩应用于输入字段以使用模板自动格式化值，您需要监听输入键按下事件并根据掩码进行处理。有些脚本已经执行此操作，例如Masked Input Plugin for 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/

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

3 个答案: