Chrome 浏览器中的奇怪 .replace() 行为

Question

<div>
    <input type="text" class="allownumericwithdecimal"/>saadad
</div>

$(".allownumericwithdecimal").live("keypress keyup ", function (event) {
    $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
    var text = $(this).val();
    if (!((event.which >= 48 && event.which <= 57) || event.which == 8 || event.which == 46 || event.which == 110 || event.which == 0)) {
        var text = $(this).val();
        if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.'), text.indexOf('.').length).length > 2)) {
            //event.preventDefault();
        }
    }
    var text = $(this).val();
    if ((event.which >= 48 && event.which <= 57) && (text.indexOf('.') != -1)) {
        if ((text.substring(text.indexOf('.'), text.indexOf('.').length).length) > 2) {
            //event.preventDefault();
        }
        if (event.which == 190) {
            //event.preventDefault();
        }
    }
    if (text.indexOf('.') != -1 && event.which == 190) {
        if (text.match("^[0-9]+(\.[0-9]{0,2})?$")) {} else {
            $(this).val('');
        }
    }
    if (text.indexOf('.') == -1 && text.length > 7 && (event.which != 190 && event.which != 8 && event.which != 46 && event.which != 110 && event.which != 0)) {
        event.preventDefault();
    }
});

http://jsfiddle.net/Lx9h2smh/

问题是如果我在 textBox 中键入一个值，比如 3434，现在我想通过将光标放在 3 之后并按 5 使其成为 35434，它在 Firefox 和 IE 中工作正常，但在 chrome 5加值后变成34345.

罪魁祸首是替换非数字字符的行。

如何处理这个问题？？

Answer 1

当我将 fiddle 更改为仅使用 keyup 时，

kepress 似乎是罪魁祸首替换发生正确（尽管光标移动到末尾）

http://jsfiddle.net/Lx9h2smh/1/

Answer 2

试试这个 code，它会运行。 jsFiddle

我只是做个测试

if ( /[^0-9\.]/g.test($(this).val()) ) {
    $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
}

解释

您只需确保用户输入您想要的值即可。如果输入的值不是 integer，则替换。您的正则表达式表示："Those which are not integer or dot (.), replace them with an empty value"。这就是为什么你需要做这个测试。因此，如果用户输入您想要的值，它不会执行替换操作，也不会通过测试。

Answer 3

只需删除 'keypress' 事件 keypress 事件与 keydown 事件非常相似。如果您按下按钮，则按键事件无法识别字符。在您的代码中，它将当前输入 Empty 用作替换字符。

Answer 4

$(".allownumericwithdecimal").live("keypress keyup ",function (event) {

    var caretP= $(this).getCursorPosition();
    $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
 var text = $(this).val();        
   
 if (!((event.which >= 48 && event.which <= 57) || event.which ==8 || event.which ==46 || event.which ==110 || event.which ==0) )
 {
  var text = $(this).val();
  if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.'), text.indexOf('.').length).length > 2)) {
   //event.preventDefault();
  }       
 } 
 var text = $(this).val(); 
 if((event.which >= 48 && event.which <= 57) &&  (text.indexOf('.') != -1))
 { 
  if((text.substring(text.indexOf('.'), text.indexOf('.').length).length)>2)
  {
   //event.preventDefault();
  }
  if(event.which==190)
  {
   //event.preventDefault();
  }
 }
 if(text.indexOf('.') != -1 && event.which==190 )
 { 
  if(text.match("^[0-9]+(\.[0-9]{0,2})?$")){
  }
  else{
   $(this).val('') ;
  }
 }
  if(text.indexOf('.') == -1 && text.length>7 && (event.which!=190 && event.which !=8 && event.which !=46 && event.which !=110 && event.which !=0)){
   event.preventDefault();
  }
    
    $(this).selectRange(caretP,caretP);
    
});




(function($) {
    
    $.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};
    
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div>
    <input type="text" class="allownumericwithdecimal"/>saadad
</div>

Chrome 浏览器中的奇怪 .replace() 行为

Strange .replace() behaviour in Chrome browser

javascript

jquery

replace