输入数字掩码-防止减号

Question

Trying to build an own input number mask for number with space as separator and no decimals. Both positive and negative numbers allowed. Solution below so far. One issue, how to not allow only a minus sign (input field should then be empty or 0) and trailing minus signs? Any other suggestions how to improve code?

 function thousandany(x) { return x .replace(/(?!-)\\D+/g, '') //ta bort alla utom nummer .toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, " "); } $(document).ready(function() { $("input").keyup(function() { $(this).val(thousandany($(this).val())); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input style="text-align:right"> 

Answer 1

I really do not know much about regex, but your UX does not seem very user-friendly and confortable. Why not run further validation on the data to see if it works fine? You are forcing the user to type only on the right side. If you want to change the text you have inputted, and it has 20 figures, you would have to remove all of them just to change the first one.

I would recommend, as an alternative approach, as I said, to run validation to the code after the user has finished typing the data (so it does not become annoying), or for example when it focuses out of the input. The user is not idiot, if you tell him once that he has to enter, say, positive numbers, say, an integer, he will change the input accordingly. To be constantly tricking his or her input can actually become annoying, especially if you cannot change the text you have already written.

You can check whether it is a valid number, whether it is integer, whether it is positive, etc. It makes much more sense for me than to be forcing the input in such a way, and it also makes the code much more complicated – when my opinion is that it is unnecessary.

Also do not forget that there are other aspects such as scientific notation (which you might want to consider) which use also letters and would require a much more complex regex if you wanted to implement them at all.

Of course I know this does not directly answer your question, but it might make you re-think if the effort you are making is completely necessary or you can follow a more efficient approach.

An example of how you could do it after the user focuses out or clicks a specific button, would be:

$(document).ready(startCheck)

function startCheck() {

    $("#myInputField").focusout(checkData)
    %("#myButton").click(checkData)
}

function checkData() {
    var data = $("#myInputField").val();
    if $.isNumeric(data) {
        // do something
    } else {
        alert("Please input a number")
}

Of course you can change it on your convenience, to do a more user-friendly way of notifying that input is incorrect, and to adjust whether you want only integers to pass, or positive values to pass, etc.