31
I have a Textbox:
<input type="text" name="indice" class="number">
I wanted that when a person typed a comma in this Textbox it would be blocked and not appear in the Textbox.
How to do it the best way?
I would not like that if the person kept pressing the comma, it would appear in the Textbox and only then it was erased, it was the most that I could do.
17
If your goal is to stop not only him being typed, but that it is used as value anyway (eg: copy and paste) I suggest listening to the property input and adjust the value according to its rule (in this case, delete the commas):
$('input').on("input", function(e) {
$(this).val($(this).val().replace(/,/g, ""));
});
Example in jsFiddle. In some older browsers, you may also need to listen by propertychange (but I believe that input is widely supported).
This way, it doesn’t matter if the comma was typed on the "normal" keyboard, the number pad, Ctrl+C Ctrl+V or even Right-click and "paste". The value will be maintained without the comma in all cases, and no visual Glitch will occur.
P.S. See also that question I did some time ago at SOEN, for more details.
11
You probably tried to intercept the key at the event keyup. If you use the keydown, the comma does not appear.
Example in jQuery:
$('input').keydown(function(e) {
if(e.which === 188 || e.which === 110) { // 188 é vírgula e 110 virgula do teclado numérico
return false;
// ou:
// e.preventDefault();
}
});
Friend, thanks for the answer. But it didn’t work. I put an Alert before the Return false to test. The Alert appears when I pinch comma, but then the comma also appears.
But without the alert works. You really need the alert? If you don’t want to use return false, e.preventDefault() suffice.
It is really with Alert does not work. I only used it to test. It did not work because I was using the comma of the numeric keyboard. You know her number?
I think it’s 110.
I gave an upvote, but honestly I would not be very pleased to use a solution with these fixed codes. What happens if I copy a comma character and paste it into the field?
@Joaopaulo Feel free to accept mgibsonbr’s answer instead of mine. His is better, it works in more cases.
This option would work well in some situation that had to block enter for example...
@Kennyrafael True, I’ve used this method many times to block enter.
11
The reply from @bfavaretto answers the question directly, but as I commented, I would not use a character filter of this type to prevent unwanted input.
This can be easily circumvented, even unconsciously (unintentionally), if the user copies a text and paste it into the field (Ctrl+c and Ctrl+v).
An even option not to reinvent the wheel is to use a plugin like the jquery-plugin-filter-text-input, whose advantage is that by typing the invalid character it preserves the cursor location, which does not work only when trying to paste invalid content.
The thing gets even worse: if the user right-click and choose "paste" on dropdown, it can enter an incorrect value without any key being pressed...
@mgibsonbr It’s true, because some people think that lock combinations with the key ctrl is a solution.
Another suggestion is to use one of the many Mask plugins. Personally like from here.
@Anthonyaccioly I’ve used this plugin a few times, it’s very good. But in the specific case of this question, the OP does not want a mask, it wants to prevent a certain character in the box, without a specific formatting.
utluiz, so I left in comment instead of a part response. I believe that to inputs the mask is better from a usability point of view. And, as at some point I believe that this site will become public and indexed by Google, I found it useful to leave a comment to those who do not know the option.
2
A very simple way would be to simply disable input using the disabled property ( <input name="" value="" disabled /> ). This way you can manipulate the value of this field and does not allow the user to type anything through the keyboard.
1
An alternative with pure Javascript:
const input = document.querySelector("#input");
input.addEventListener("keypress", function(e) {
if(e.key === ",") {
e.preventDefault();
}
});
In this example, we are checking the digits in this input and testing if the key is the character that cannot be entered if we simply cut the event with preventDefault.
If there are other characters that cannot be inserted, it is possible to check whether the character is in an array.
Browser other questions tagged javascript jquery html
You are not signed in. Login or sign up in order to post.
This solution is better than mine, I did not know this event! It is the reference: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input
– bfavaretto
Great solution. I will use it
– Joao Paulo
This one has the annoying problem of not keeping the cursor in the right place. Some way to do this?
– Guilherme Bernal
@Guilhermebernal Cara, I have the same problem! I’ll even take a look at the plugin indicated by utluiz, because at the moment I do not know any solution. I’ve been reading methods to manipulate the cursor in the browser, but I gave up because of the complexity...
– mgibsonbr