How to lock certain keys in an input using Javascript?

Asked

Viewed 3,023 times

3

Guys, I have a javascript function where I allow only numbers, comma (,) and hyphen (-) in an input.

The problem is that I can type as many commas (,) and hyphens (-) as I want. I wanted to know how to allow just one comma or less.

My javascript

// Somente numeros e , e -
function SomenteNumero(e) {
var tecla = (window.event) ? event.keyCode : e.which;
if ((tecla > 47 && tecla < 58 || tecla === 44 || tecla === 45 || tecla === 13))
    return true;
else {
    if (tecla === 8 || tecla === 0)
        return true;
    else
        return false;
}
}

I find it so in input:

  <input type='text' name='mg' onkeypress='return SomenteNumero(event)'>
javascript jquery html
  • 1

    What pattern are you looking for? Currency? Two numbers separated by a comma? A number that allows fractions? Please explain in more detail.

  • Will the hyphen be used to identify negative numbers or can it exist in the middle of the number? You want to allow numbers like -10, 10, 10,11, -10,11, 0, -0, 0,123 and -0,123?

  • the hyphen is only for negative numbers, that is, it can only be used at the beginning

2 answers

3


Because AP needs to use positive values or negative, I edited the answer suggesting the plugin Mask money instead of jQuery Mask - https://github.com/igorescobar/jQuery-Mask-Plugin

Mask money

Use the plugin Mask money, is even easier to use than the previous.

Configuration options

  • allowNegative: allows negative values if set to true
  • prefix: adds a prefix in input, eg.: R$ 9,99
  • suffix: adds a "postfix" to the input, eg.: 9,99 $
  • thousands: sets the thousand separator, the default separator is ,
  • decimal: sets the decimal separator, default and .

Handling options

  • .maskMoney('destroy'): removes the element mask
  • .maskMoney('unmasked'): returns a value float without the mask, e.g..: ('R$ 1.234,56' => 1234.56)

There are still other usage options. See the example applying the mask to your case.

$("#myInput").maskMoney({
  allowNegative: true,
  decimal: ',',
  thousands: '.'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<input id="myInput" />

jQuery Mask

That plugin - jQuery-Mask-Plugin is very easy to use and customizable. See here an example of how you can use.

$('#myInput').mask('000.000.000.000.000,00', {
  reverse: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script>
<input type="text" id="myInput" />

  • jQuery Mask and very good as I can work with various masks, date, time, money and etc... Already the other plugin you sent only works with money. There is some way to report negative numbers in jQuery Mask?

  • 1

    There’s no way. Before suggesting the other plugin I researched in Google and found some issues in the project’s Github and it was there that suggested the use of this plugin to format values. You can use both plugins without any problem, because both are very light.

  • I got it ok, just one more question with do to use the jQuery Mask and allow only numbers in an input?

  • look I was able to make it work with -, but it doesn’t format correctly, just look. http://jsfiddle.net/6pco4om7/282/

  • I think it will not work as expected, I do not see why not use maskmoney, which was made precisely for this type of formatting and even suggested by the jQuery Mask community.

1

You can resolve this through a regular expression.

function somenteNumero(value) {
  if (/([0-9]+\,?)/.test(value)) return true;
}

Right after the asterisk you have the permission of the comma. With the regular expression you assemble the rule that is needed.

  • This regular expression would accept a text ",,," (commas only) and also "123,456,789" more than one comma.

  • I already edited the regex. Thanks. Now only accepts a comma and numbers.

  • Still accepts more than one comma /([0-9]+\,?)/gi.test('123,456,789')

  • I created another one assuming it’s for monetary values, but he also commented on the hyphen. I’m seeing how to solve this with regex, but I don’t think this solution will work. ([0-9]+,? [0-9]+)$

  • This regex requires that there are at least two numbers and if you use the modifier g, the problem of using multiple commas will be present again. It does not know how to express the pattern it seeks.

  • Having the pattern you can solve with regex. I removed g, let’s see if you have the answer to the pattern you are looking for.

Show 1 more comment

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.