JavaScript附加到HTML字符串中的特定位置

Question

我正在构建一个键盘，以通过触摸设备输入货币金额。

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

用户输入2位数字后，我会附加一个小数。 但是，一旦他们输入了4位数字，我需要将小数点后移，因此它始终是数字字符串末尾的2位数字。

这样，字符串始终以美元和美分显示。

我无法在#numBox的字符串末尾找到.append X数字的方法。 同样，即使我能够做到，也需要某种方式在字符串中搜索旧的十进制并将其删除，然后再在右边再添加一位数字。

有什么帮助吗？ 如果这不够简洁，我们很乐意进一步解释。 耐心点，我真是个菜鸟。

Answer 1

解决了问题

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!");
    } 
  }

});

Answer 2

尝试这样的事情

        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);

Answer 3

我检查了您的修复程序，但似乎有问题。如果您按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;
}

Answer 4

非常简单，只需将$（。key）.onclick（）中的代码重新添加为$（div.btn）.onclick（）..，请参见下文：

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


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

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

 });