How do I check if the user is typing in a text field? - actionscript-3

How would you check if the user is typing into a text input (Flex TextArea, TextInput, RichEditableText)?
In my AIR app I want to listen for keyboard events on the application but I only want to respond if they are not typing into a text field and if no other component handles it.
For example, I want to listen to the A key and run a command. But only if they are not typing into a text field.
FYI I added a NativeFlexMenu and added keyboard modifier to it for A and it is capturing the key event even when the user is typing in a text field.

This appears to work when added to the application. The one problem with this is that if a text field has focus it will continue to have focus even if you click on the application. I might try to add an click event handler to change focus.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication keyUp="application1_keyUpHandler(event)"
keyDown="application1_keyDownHandler(event)">
</s:WindowApplication>
protected function application1_keyDownHandler(event:KeyboardEvent):void {
var keyCode:int = event.keyCode;
var applicable:Boolean;
var focusedObject:Object;
var target:Object = event.target;
if (keyCode==Keyboard.A ||
keyCode==Keyboard.B ||
keyCode==Keyboard.C) {
if (!event.controlKey && !event.commandKey) {
applicable = true;
}
}
if (!applicable) return;
focusedObject = focusManager.getFocus();
if (focusedObject is Application || event.target is Stage) {
isApplication = true;
}
//var t:int = getTimer();
if (target is RichEditableText ||
focusedObject is IEditableText ||
focusedObject is SkinnableTextBase ||
focusedObject is TextField ||
focusedObject is FTETextField ||
focusedObject is FlexHTMLLoader ||
focusedObject is ComboBox) {
applicable = false;
}
//trace("time:" + (getTimer() - t)); takes 0 ms
if (applicable) {
if (keyCode==Keyboard.A) {
// do something
}
else if (keyCode==Keyboard.B) {
// do something
}
else if (keyCode==Keyboard.C) {
// do something
}
}
}

Related

How to check if a textbox contains a specific string or not?

I have an input textfield named "textbox" and a button named "submit".I also have two text messages "mc_error" and "form_submitted" which are not visible from the beginning. Upon clicking the button, I want it to check if the textfield contains "#" in it. I have tried the below code that uses indexOf but it always returns the value -1 and therefore upon execution always "mc_error" becomes visible.
var str:String = textbox.text;
submit.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
mc_error.visible = false;
form_submitted.visible = false;
function fl_MouseClickHandler(event:MouseEvent):void
{
var index:int = str.indexOf("#");
if(index == -1)
{
mc_error.visible=true;
}
else
{
form_submitted.visible=true;
}
}
Would be grateful if got some immediate answers as i need it working in 2 days.Thanks
Because you set variable before user inputs anything there and it is always "". Just don't use that variable (or read it in the function body as shown below) and it will be fine.
function fl_MouseClickHandler(event:MouseEvent):void
{
var str:String = textbox.text;
var index:int = str.indexOf("#");
if(index == -1)
{
mc_error.visible=true;
}
else
{
form_submitted.visible=true;
}
}

How to remove carriage return char after it's pressed?

I have a textarea which is restricted to input only numbers. I want to remove carriage return char after user presses enter key. Here's my code:
// Change tempo
function changeTempo(event:KeyboardEvent):void {
if (event.charCode == 13) {
// Some code here
}
// Remove enter char
removeCarriageReturnsAndNewLines(tempo_txt.text);
}
function removeCarriageReturnsAndNewLines($myString:String):String {
var newString:String;
var findCarriageReturnRegExp:RegExp = new RegExp("\r", "gi");
newString = $myString.replace(findCarriageReturnRegExp, "");
var findNewLineRegExp:RegExp = new RegExp("\n", "gi");
newString = newString.replace(findNewLineRegExp, "");
return newString;
}
I would say the easiest way is to listen to text input, something like this:
var t:TextArea = this.ta; //ta is on the timeline
t.restrict = "0-9"; //restricts the input only to numbers
t.addEventListener(TextEvent.TEXT_INPUT, onTextInput, true); //use capture phase to be able to prevent the default behavior (text input)
function onTextInput(e:TextEvent):void {
if(e.text.indexOf("\n") > -1) {
e.preventDefault(); //prevent the default behavior of the field
}
}
I cannot test this right now but I guess it should work without problems.

Tabbing through a textarea that captures tab

Many times when I am being tab to switch fields, some times it entered into a text area where pressing tab indent your text. How can I get out these textareas using keyboard so I can continue switching fields.
...here is a fiddle that does the same.
If the websites themselves are overriding this default/expected behaviour then they are breaking a standard UI feature (and possibly lessening site accessibility - although that may depend on the particular application) and it is really up to the site to implement some kind of alternative. There is no other "built-in" keyboard shortcut to move focus to the "next page element".
If, however, you just want to get focus out of that textarea, then you could perhaps use another shortcut, such as Ctrl+L which moves focus to the address bar. From their you can start TABing again to move focus.
You can use the following to do what you need:
http://postcode.cf/support-tabs-in-text-areas.html
/* Support Tabs within your textarea */
HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea
return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea
this.selectionStart = position;
this.selectionEnd = position;
this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true
if (this.selectionStart == this.selectionEnd) {
return false;
} else {
return true;
}
};
HTMLTextAreaElement.prototype.getSelectedText = function () { //return the selection text
return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) { //change the selection area of the textarea
this.selectionStart = start;
this.selectionEnd = end;
this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0];
textarea.onkeydown = function(event) {
//support tab on textarea
if (event.keyCode == 9) { //tab was pressed
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() + " ".length;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
return false;
}
if(event.keyCode == 8){ //backspace
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 37){ //left arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 39){ //right arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() + 3;
textarea.setCaretPosition(newCaretPosition);
}
}
}

Virtual Keyboard disappears when touch on input:text iscroll4

keyboard pops up and goes down when clicked on input text.
i'using iscroll 4 cordova 1.6 technologies.
when user touches a text input the keyboard pops up and disappears from the screen
does any1 hav solution for it
thanks in advance
the problem is that ....app is able not focusing on the text area ....whenever user click on text area ...
The solution is document.getElementById('id').focus();
id of text field.
well for that you need to modify iScroll.js
1) take iScroll v4.1.9
2) change code for "onBeforeScrollStart" line #100 to this
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
3) change code for "_start" line #317 add this code
_start: function (e) {
if (e.target && e.target.type != undefined) {
var tagname = event.target.tagName.toLowerCase();
if (tagname == "input" || tagname == "button" || tagname == "textarea") {// stuff we need to allow
return;
}
}
var that = this,
point = hasTouch ? e.touches[0] : e,
matrix, x, y,
c1, c2;

Tabbing in text boxes

How can I make a text box that allows users to enter tabs, and does not send the user to the next element when the tab button is pressed?
You only need to check for tabs onkeydown via event.keyCode === 9. Inserting the character into the textarea is non-trivial - use a library or google for 'insertatcaret'.
There are already some plug-ins for jQuery that do this. One for example is Tabby.
<textarea onkeydown="return catchTab(this, event);">
JS code:
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
if (selectionStart != selectionEnd){
setSelectionRange(input, selectionStart, selectionStart + replaceString.length);
} else{
setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
}
} else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) {
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
function catchTab(item,e){
if(navigator.userAgent.match("Gecko")){
c=e.which;
} else{
c=e.keyCode;
}
if(c==9){
replaceSelection(item, "\t");
setTimeout(function() { item.focus() } , 0);
return false;
}
}
You can use JavaScript to catch the tab keypress event and replace it with spaces (I'm not sure about inserting tabs into a textarea).
E: This page looks good.
onkeypress, onkeyup or onkeydown check the key that was pressed and if it is a tab then append \t to the textbox and return false so that focus remains on the textbox
you will most likely have to use textranges so that tabs can be inserted anywhere not at the end of the text
that's the basic idea for the rest google is your friend :)
Do NOT try to capture the onkeypress event for the 'TAB' key in IE (it doesn't work) (bug 249)
Try onkeydown or onkeyup instead.