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

【问题标题】：Strange .replace() behaviour in Chrome browserChrome 浏览器中奇怪的 .replace() 行为
【发布时间】：2015-07-08 10:32:39
【问题描述】：

<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。

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

如何处理这个问题？？

【问题讨论】：

有趣，但测试用例不清楚，添加正确的输入值和您想要输出的实际值。
每次按下键盘时，它都会用一个新值替换该值。因此，您需要在替换 input 元素的值之前进行测试。
@S͢kyD͢ream 谢谢，我在过去一小时内参加了会议，问题已经解决。我还需要为未来的搜索者添加正确的输入和期望的输出值吗？？
@RishiPrakash 不不，我明白了，谢谢好阙。 :)

标签： javascript jquery replace

【解决方案1】：

试试这个code，它运行。 jsFiddle

我只是做一个测试

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

解释

您只需确保用户输入您想要的值。如果输入的值不是integer，则替换。您的正则表达式的意思是：“那些不是整数或点 (.)，用空值替换它们”。这就是为什么你需要做这个测试。因此，如果用户输入您想要的值，它不会执行操作替换，也不会通过测试。

【讨论】：

我投票赞成你的答案。不是我发的！！
我想，你就是问这个问题的人！感谢投票！ :)
@RadonirinaMaminiaina 我是发布此代码的人 :) 感谢您的帮助。
@RishiPrakash 很高兴为您提供帮助。
@RadonirinaMaminiaina 你能否也为此添加理论解释，我的意思是你的代码是如何工作的？

【解决方案2】：

$(".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>

【讨论】：

是的，工作得很好。但光标位置的额外代码。 :( 注意：我没有问过问题。

【解决方案3】：

kepress 似乎是罪魁祸首，当我将小提琴更改为仅使用 keyup 时，替换发生正确（尽管光标移到了末尾）

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

【讨论】：

光标不能移到结尾。

【解决方案4】：

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

【讨论】：