Javascript，爲帶有下標和上標的文本框創建模板

我對JavaScript很新穎。在我對一些示例代碼的實驗中，我創建了一個包含表格的html文件。在其中一個表格數據字段中，我有一個文本類型字段。有沒有一種方法可以製作一個插入預定義模板的按鈕，以便進行操作？又名我按一個按鈕「錢」，輸入一個額外的格式文本爲「$ 0.00」。Javascript，爲帶有下標和上標的文本框創建模板

因此，例如

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

在一個側面說明，如果我想使用下標和上標是什麼？我嘗試過使用.sup（）和.sub（）方法，但它只是插入標籤並且不會改變文本的美感。（所以在表中，它看起來像反對 _{事情被下標}

來源

2014-11-14 sudobangbang

請張貼你的代碼。 – j08691 2014-11-14 15:13:54

@ j08691對不起，已更新 – sudobangbang 2014-11-14 15:23:24

我不熟悉的任何方式的模板文本格式

<sub> things to be subscript </sub>

，所以你可能只需要硬編碼在邏輯關於你的第二個問題，當您使用.sup和.SUB方法，你在內部HTML插入的結果，例如：？

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

來源

2014-11-14 15:53:48 barrt051

內部html會更改文本字段中的所有文本還是僅更改特定字符？如果我有其他我不想改變的數據呢？ – sudobangbang 2014-11-14 16:05:05

您需要保留已存在的內容。 document.getElementById（「tableCell」）。innerHTML = document.getElementById（「tableCell」）。innerHTML + result; – barrt051 2014-11-14 16:13:56

我有點困惑，但我米假設你是嘗試通過innerHTML添加sup/sub腳本？

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

CSS：

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

或者，你可以使用一個for循環：

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

來源

2014-11-14 16:02:05

，以便應用遮罩輸入字段爲自動格式值與模板你將需要聽取輸入按鍵事件並根據您的面具進行處理。有一些腳本已經這樣做，如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/

來源

2014-11-14 16:05:19

Javascript，爲帶有下標和上標的文本框創建模板

回答

相關問題