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字符串中的特定位置

回答

相关问题