如何在jQuery中触发模糊事件
[英]How to fire blur event in jquery
问题描述
I have function with blur event, and working with regex, to replace the input value on the blur event. 
我具有模糊事件的功能，并使用正则表达式来替换模糊事件的输入值。 But I have some issue where the blur event still running it when the input field read the next event blur and it make my regex running twice and make a NaN, i really appreciate your help. 但是我有一个问题，当输入字段读取下一个事件模糊时，模糊事件仍在运行它，并使我的正则表达式运行两次并产生NaN，我非常感谢您的帮助。 here is my code below: 这是我的代码如下：
$(document).ready(function(){ $('#myNumber').on('blur', function ({target}) { if ($(this).val()) { let number = parseInt($(this).val()); const num = '$ ' + number.toFixed(2).replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, "$1,"); $(this).val(num); } }); })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <input type="text" id="myNumber"> </body> </html>
4 个解决方案
解决方案1
1 2018-03-23 11:58:29
It's because you have $ sign after the first blur event execution. 这是因为在第一次blur事件执行后，您有$符号。
Remove it from your js function. 从您的js函数中删除它。
$(document).ready(function(){ $('#myNumber').on('blur', function ({target}) { if ($(this).val()) { let number = parseInt($(this).val()); const num = number.toFixed(2).replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, "$1,"); $(this).val(num); } }); })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <span>$</span><input type="text" id="myNumber"> </body> </html>
解决方案2
1 2018-03-23 12:05:59
$('#myNumber').on('blur', function ({target}) { if ($(this).val()) { var numberValue = $(this).val().trim(); if(numberValue.charAt(0) == '$') { var numberValue1 = $(this).val().trim().slice(2); let number = parseInt(numberValue1); const num = '$ ' + number.toFixed(2).replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, "$1,"); $(this).val(num); } else { let number = parseInt($(this).val()); const num = '$ ' + number.toFixed(2).replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, "$1,"); $(this).val(num); } } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="myNumber">
解决方案3
0 已采纳 2018-03-23 11:58:05
The problem is that when you get the value in the second time, it has a '$' in the val() , so it is not a number and it causes the NaN problem. 问题在于，当您第二次获得该值时，它在val()具有一个“ $”，因此它不是数字，并且会引起NaN问题。 You should replace the sign every time when you get inside the function. 每次进入函数内部时，都应替换符号。 I also change const num = to var num = ... because I'm not sure if is good to use a const that will change... 我也将const num =更改为var num = ...因为我不确定使用会改变的const是否好...
$(document).ready(function(){ $('#myNumber').on('blur', function ({target}) { if ($(this).val()) { let number = parseInt($(this).val().replace('$','')); var num = number.toFixed(2).replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, "$1,"); num = '$ ' + num; $(this).val(num); } }); })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <input type="text" id="myNumber"> </body> </html>
解决方案4
0 2018-03-23 12:01:32
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.