Javascript追加到HTML字符串中的特定位置

我正在構建一個通過觸摸設備輸入金額的鍵盤。Javascript追加到HTML字符串中的特定位置

一旦用戶已經輸入的2位數字，我追加一個小數。但是，一旦他們輸入4位數字，我需要攜帶小數點，因此它始終是數字串末尾的2位數字。

這樣的字符串始終顯示爲美元和美分。

我一直沒能找到一種方法，從#numBox字符串的結尾.append X數字。此外，即使我能夠，也需要在舊字符串中搜索舊的十進制數字，並在將另一個數字添加到右側之前將其刪除。

任何幫助？如果這不簡要，很樂意進一步解釋。要有耐心，我是一個總SO no noob。

2013-12-21 Jeremy P. Beasley

雖然這些方法工作從UX（用戶體驗）角度來看，他們有一個主要的缺點。可以說，我的意思是進入'13'，但我輸入'12'，但意外。所以我第一個數字就是'1'，第二個是'3'。此時出現小數點。點擊'delete'現在擦除我沒有輸入的小數點，然後點擊'2'和'enter'完成。我現在在箱子裏的價值是'132'而不是'12'。 –

嘗試這樣的事情

 var str = "12.345"; 
     str= str.replace("\.",""); 
     if(str.length > 2){ 
      str = str.substr(0, str.length - 2) + '.' + str.substr(str.length - 2); 
     } 
     alert(str);

來源

2013-12-21 08:00:29

修正問題

if (digits %2 == 0) 
{ 
     var mystring = $("#numBox").html(); 
     mystring = mystring.replace('.',''); 
     $("#numBox").html(mystring); 
     $("#numBox").append("."); 
     console.log("worked!"); 
}

檢查http://codepen.io/bsley/pen/hrEmK

更新的代碼試試這個

$(document).ready(function(){ 


    var digits = 0; 
    var numBox = document.getElementById('numBox'); 




    $('.key').click(function(){ 


     if(this.innerHTML == '0'){ 
      if (numBox.innerHTML.length > 0) 
       numBox.innerHTML = numBox.innerHTML + this.innerHTML; 
       digits += 1; 
       //console.log("digits"); 

     } 
     else 
      // add digits   
      numBox.innerHTML = numBox.innerHTML + this.innerHTML; 
      digits += 1; 
      //console.log(digits); 

     event.stopPropagation(); 
    }); 

    $('.btn').click(function(){ 
     if(this.innerHTML == 'DEL'){ 
      var numBox = document.getElementById('numBox'); 
      if(numBox.innerHTML.length > 0){ 

       // delete a digit 
       numBox.innerHTML = numBox.innerHTML.substring(0, numBox.innerHTML.length - 1); 
       digits -= 1; 
       //console.log(digits); 
      } 
     } 
     else{ 

      // clear numbox 
      document.getElementById('numBox').innerHTML = ''; 
      digits = 0; 
      //console.log(digits); 
     } 

     event.stopPropagation(); 
     _checkForDecimals(); 
    }); 


    //decimal entry 

    $('.key').click(function(){ 

    _checkForDecimals(); 

}); 

    function _checkForDecimals() 
    { 
    if (digits > 2) { 
     var mystring = $("#numBox").html(); 
     mystring = mystring.replace('.',''); 
     var firstPartOfString = mystring.slice(0, mystring.length - 2); 
     var secondPartOfString = mystring.slice(mystring.length - 2,mystring.length); 
     //alert(firstPartOfString+'.'+secondPartOfString) 
     mystring = firstPartOfString+'.'+secondPartOfString; 
     $("#numBox").html(mystring); 
     //$("#numBox").append("."); 
     console.log("worked!"); 
    } 
    } 

});

來源

2013-12-21 08:10:15

我在這裏更新了代碼：http://codepen.io/bsley/pen/hrEmK但它仍然無法正常工作。我需要小數位總是從字符串的末尾完全2位數字。 –

對不起，我的壞，我誤解了 –

現在檢查更新的代碼，它完美的工作！ –

我檢查你的修復。但它似乎有一個問題。如果你按1到9的所有鍵，數字變成12345678.9。但根據你的要求，應該是1234567.89 [如果我理解正確]。請嘗試下面的解決方案，看看它是否符合您的要求。請注意，在代碼塊的末尾，我添加了兩個函數「GetNumberAfterAppendingDecimal」和「GetCleanString」，然後我使用了$（.key）.click（）;

$('.key').click(function(){ 
var inputNumber=GetCleanString($("#numBox").html()); 

$("#numBox").html(GetNumberAfterAppendingDecimal(inputNumber));

}）; （鑰匙）

function GetNumberAfterAppendingDecimal(str) { 
    if (str.length < 3) 
     return str; 
    var positionFromEnd = 2; 
    var reversedStr = str.split('').reverse().join(''); 
    if (str.length == 3) 
     positionFromEnd -= 1; 
    reversedStr = [reversedStr.slice(0, positionFromEnd), ".", reversedStr.slice(positionFromEnd)].join(''); 
    return reversedStr.split('').reverse().join(''); 
} 
function GetCleanString(str) { 
str = str.replace(/[\r]+/, ''); 
str = str.replace(/[\n]+/, ''); 
str = str.replace(/[\t]+/, ''); 
str = str.replace('.', ''); 
str = $.trim(str); 
return str; 
}

來源

2013-12-21 08:42:52 Arindam

在3位的情況下，例如123，如果要作爲1.23的輸出，然後，從功能「GetNumberAfterAppendingDecimal」除去下面的條件：如果（str.length == 3） positionFromEnd - = 1; – Arindam

非常感謝！現在唯一的問題是，如果你使用刪除按鈕，小數點將失去它的位置。你會如此善良以幫助我完成這項工作嗎？ –

非常簡單，只需repleat內$）的代碼.onclick（以$（div.btn）.onclick（）..見下文：

$('div.btn').click(function(){ 


var inputNumber=GetCleanString($("#numBox").html()); 

$("#numBox").html(GetNumberAfterAppendingDecimal(inputNumber)); 

});

來源

2013-12-21 09:00:44 Arindam

Javascript追加到HTML字符串中的特定位置

回答

相關問題