Block Emoji from being inserted into text field - javascript

I have a text field for user input, but only allows a limited character set. Blocking keyboard characters works fine using keydown to first vet the keystroke, then event.preventDefault() if it doesn't pass.
Windows has an Emoji menu which can be activated by WIN+Period or right click. The menu allows the user to click on Emoji icons and have them inserted into the text field.
This event can be captured via Input and the character is shown in event.data for vetting. What I cannot resolve though is how to block the action event.preventDefault() does not stop this.
Here's an example of the type of code I've tried.
textbox.addEventListener( "input", event => {
if ( event.data === BAD ) {
event.preventDefault();
}
}, false);
Digging into the event data I see that cancelable is false, whereas for keydown it's true.
Is there a perhaps another event other than input to capture this is earlier?

Based on #CoryCoolguy's suggestion one solution is to remove characters from the text field after they're entered by checking the contents of the field.
This solution uses a regex validator to locate any characters that are not part of a valid set, then replace them with a blank character.
textbox.addEventListener( "input", event => {
textbox.value = textbox.value.replace( /[^a-zA-Z0-9 ]/gm, '');
}, false);
textbox.addEventListener( "paste", event => {
textbox.value = textbox.value.replace( /[^a-zA-Z0-9 ]/gm, '');
}, false);
Using the input event, each time a character is typed or inserted via the Windows Emoji panel the value of the text box is scanned and any characters not matching the regex is removed.
Adding a paste event listener will monitor anything pasted from the clipboard and will allow the contents to be pasted before removing any unwanted characters. This means that if there's a mix of valid and non-valid character in the clipboard, then the valid ones will still get pasted.

Related

html url input disable keyboard autospace after sentence (mobile)

I have html input fields and in mobile devices, the keyboard automatically adds spaces after sentence.
This is problematic for a input of type "url". How do I disable it?
I tried the following and still adds a space after the period in the domain name.
Assuming you have your input stored in a variable and that you are interested in its value only when you do a submit, you can easily trim its value with
yourInput.trim();
this will remove all leading and trailing spaces, thus cleaning your input.
If you want to delete the spaces directly when typing, you can attach that code to the change event:
yourInput.addEventListener('change', e => e.currentTarget.value.trim());

Detect entered character with jquery(spanish,áúí)

I'm working on #mention feature and need to load list of users that start with entered character in an input text field .
The problem is with Spanish character like (íáúóé).
in my code I use keypress and keydown to detect characters but in Spanish the keypress event doesn't fire .
in order to type the "á" user need to press two keys
first one is "´" and second is "a" ,then we got "á".
in keydown event using the method String.fromCharCode(e.which || e.keyCode) on this key"´" return "å"
The question how to catch this scenario?
Thanks

How do I get the last thing input from an "input" event

I have been trying to deal with getting the last input in to a text field on an Android app from Javascript.
I was originally trying to use the KeyUp, KeyDown and KeyPress events to get the KeyCodes from keyboard input however with android soft keyboards you will get the KeyCode 229 for every key other than backspace, space and enter.
So now I am using the onInput event however this just seems to alert me to the fact that something has been input in to a text field and not what that input was.
document.getElementById("textarea").addEventListener("input", function (e) {
ClaroSpeak.KeyHandler(e);
}, false);
Does the input event some how let me know what the last change or key was, e.g. 'space' 'a' 'F' ect...
What about setting a 'global' variable and storing the last element in it?

HTML textarea prevent some text from being deleted

I am making a terminal window in HTML/JavaScript and am using a textarea for input. I would like to prevent sections of the text in the textarea from being deleted. For example, if I had the text in the textarea "C:\>Random Code" I would like to prevent the user deleting the "C:\>" text. Is this possible using javascript?
Assuming jQuery, this script will listen for keystrokes, and if any of the required text can't be found (ie: user tries to delete it) it will add itself right back in there:
var requiredText = 'C:>';
$('textarea').on('input',function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
}
You cannot make a section of textarea uneditable (only the whole control).
You can use various JavaScript trickery (listening to keypress events and cancelling event using event.preventDefault if the user wants to do something that you do not want to allow)
Another solution is to, instead of having an undeletable section of the input, to automatically append (or prepend ) a predefined string to the user input (and conveneintly display it for the user in some way).
Update:
So, my solution would look like this:
var requiredText = 'C:>';
$('textarea').on('keyup',function(event) {
if (GetSelectionStart(this) < requiredText.length){
event.preventDefault();
event.stopPropagation();
}
}
Where GetSelectionStart is a function that tells the beginning of the selected text (or caret position, if no text range is selected). For some possible implementations, see e. g. Caret position in textarea, in characters from the start
This function assumes that requiredText is always at the beginning of the string. But of course, it can be adapted for more complex scenarios.

Howto cancel the effects of the Escape button on an html input?

I'm building a JavaScript game where audio plays and based on the audio you're supposed to type some text into a big textbox. JavaScript is used to score your answer and then clear the textbox to prepare for the next audio clip.
The problem: In some cases when pressing the esc (escape) key while focused within an empty <input type="text" />, the textbox gets populated with some old text.
I'm using MooTools and have tried using event.stop() (which stops propagating and also executes preventDefault) within keypress, keydown, and keyup with no luck.
How can I prevent the [esc] button from changing the value within a textbox?
(This is important because I'm using the [esc] key as a keyboard shortcut to replay the audio)
I was able to fix this by just calling blur() and then focus() on the input box. That cleared the problem in Firefox for me at least.
Interesting problem - it happens in IE for example but not Chrome. Here is a solution I have tested in Chrome and IE (it seems to work).
Expanded version:
Script in page header:
<script>
var buff; //Must have global scope
var input = document.getElementById("testinput"); //Defined here to save cpu (instead of on every key press).
function CheckPreBuff(e)
{
var ev = window.event ? event : e; //Get the event object for IE or FF
var unicode = (typeof(ev.keyCode) != "undefined")? ev.keyCode : ev.charCode;
if(unicode != 27) buff = input.value; //The 'escape' key has a unicode value of 27
else input.value = buff; //Only set the input contents when needed, so not to waste cpu.
}
</script>
Where 'testinput' is the input we are disabling escape on. The testinput html is below:
<input id="testinput" onkeypress="CheckPreBuff();" onkeyup="CheckPreBuff();" type="text"/>
Notice both 'onkeyup' and 'onkeypress' were used - technically only 'onkeyup' is needed, although using 'onkeypress' prevents the text box going blank momentarily whilst the escape key is depressed.
Manually minified + error prevention + multiple inputs supported (if you prefer)
Script in header:
<script>
var buff = [];
function InitCPB(obj){if(typeof(obj)=="undefined")return;buff[0]=obj;buff[1]="";obj.onkeypress=CPB;obj.onkeyup=CPB;}
function CPB(e){if(typeof((buff[0]))=="undefined")return;var ev=window.event?event:e;(((typeof(ev.keyCode)!="undefined")?ev.keyCode:ev.charCode)!=27)?buff[1]=(buff[0]).value:(buff[0]).value=buff[1];}
</script>
testinput html tag (although an id is no longer needed):
<input onfocus="InitCPB(this);" type="text"/>
Both methods keep a copy of what the text inputs contained before the next key was pressed, if the key pressed was 'escape', unicode 27, then the previous text entry was put back into the text box (this is discriminatory so the script does not add too much load to the browser on every key press).
The second version allows for multiple text inputs on the same page having the escape key disabled - just so long as they have the onFocus attribute set as above (the multiple elements will not interfere with each other). It also checks the objects being passes to it are defined, to prevent accidental mis-implementation giving IE a heart attack!
I hope this helps.
When escape detected do what is needed to be done and at the end return false;
It solved the problem in firefox 25 for me.

Categories

Resources