Question
John Deere
IN
Last activity: 2 Aug 2019 4:26 EDT
Internet Explorer is accepting characters and special characters in text field but not in Google Chrome browser
Hi,
Can you please help to resolve the below issue.
We have a requirement where the input text box should not accept the characters & Special characters. As a part of presentation the type of input text box has been changed to Number instead of Text. This configuration is working fine in Chrome( i.e. It does not accept any character & special character) however when the same configuration is tried in Internet Explorer it is not working. IE accepts the characters & special characters. Is there any solution to fix this issue so that IE should also prevent the input of Characters & Special characters.
***Edited by Moderator: Lochan to update platform capability tags***
Pegasystems Inc.
IN
Hi Yogesh,
This is a expected browser behavior. In IE <input type="number"> works differently than in chrome.It will allow entry of non-numeric characters
For reference : https://www.w3schools.com:443/html/tryit.asp?filename=tryhtml5_input_type_number
https://html.spec.whatwg.org/multipage/input.html
As a local change you can have validations written to meet the requirement.
Or you can try the below as well:
https://collaborate.pega.com/question/how-prevent-user-entering-special-characters-input-text-field
Thanks!
Pegasystems Inc.
IN
Hi Yogesh,
The below script will help you get the behavior same as in chrome.
Place the below script in the UserWorkForm rule.
<script>
$(".ie body").off('keydown', 'input[type="number"]', preventLettersOnkeydowninInputfield);
$(".ie body").off('paste', 'input[type="number"]', preventLettersOnpasteinInputfield);
$(".ie body").on('keydown', 'input[type="number"]', preventLettersOnkeydowninInputfield);
$(".ie body").on('paste', 'input[type="number"]', preventLettersOnpasteinInputfield);
$(".edge body").off('keydown', 'input[type="number"]', preventLettersOnkeydowninInputfield);
$(".edge body").off('paste', 'input[type="number"]', preventLettersOnpasteinInputfield);
$(".edge body").on('keydown', 'input[type="number"]', preventLettersOnkeydowninInputfield);
$(".edge body").on('paste', 'input[type="number"]', preventLettersOnpasteinInputfield);
Hi Yogesh,
The below script will help you get the behavior same as in chrome.
Place the below script in the UserWorkForm rule.
<script>
$(".ie body").off('keydown', 'input[type="number"]', preventLettersOnkeydowninInputfield);
$(".ie body").off('paste', 'input[type="number"]', preventLettersOnpasteinInputfield);
$(".ie body").on('keydown', 'input[type="number"]', preventLettersOnkeydowninInputfield);
$(".ie body").on('paste', 'input[type="number"]', preventLettersOnpasteinInputfield);
$(".edge body").off('keydown', 'input[type="number"]', preventLettersOnkeydowninInputfield);
$(".edge body").off('paste', 'input[type="number"]', preventLettersOnpasteinInputfield);
$(".edge body").on('keydown', 'input[type="number"]', preventLettersOnkeydowninInputfield);
$(".edge body").on('paste', 'input[type="number"]', preventLettersOnpasteinInputfield);
function preventLettersOnkeydowninInputfield(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 || (key === 65 && ( e.ctrlKey || e.metaKey )) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) || (key >= 96 && key <= 105) || (key === 189) || (e.shiftKey && key === 187) )){
e.preventDefault();
}
}
function preventLettersOnpasteinInputfield(e) {
e.preventDefault();
}
</script>