I need to restrict my users to input only dates with a custom format. I want to have something like this example in JQuery: http://www.youtube.com/watch?v=BMaTiGKykl8&feature=player_embedded
How can i archieved this in AS3?
You'll have to catch the KeyPressed event on the TextField. Check if the key pressed is OK at the specified position, if yes, do nothing, if not, cancel the event (Event.cancel = true).
Alternatively (for more features, like these auto added slashes) you can ALWAYS cancel the Event, and use the TextField's selection together with a String and some checking to always make a new version of the TextField's text.
Why not use a DateField and format the data as you see fit?
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/DateField.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2
Related
When using a HTML5 date field, every key input triggers the change event on the field on Chrome.
See jsFiddle and try to input the date manually to see the effect:
https://jsfiddle.net/hx3zcenj/4/
document.getElementById('dateFilter').addEventListener('change', function(){
document.getElementById('msgContainer').innerHTML += 'Change triggered<br>';
}); //triggers on every keypress
I would like this event to trigger like it does in a normal text field, i.e. after either selecting the date from the picker or on blur. I don't want it to trigger every time I input a character.
This is mostly relevant for Chrome, since other browsers deal with this field in different ways.
Once the date input has all the three fields, i.e. dd, mm and yyyy; it starts triggering. Which is logical as the date has all the fields and the date is a valid date, though might not be valid for business case.
You can bind the blur event which will do your job. And provide the other attributes like min and max which will also trigger errors.
And if you are going to bind the change event, then first thing you should do is check that data is valid and in the range.
How about using the focusout event instead. This will trigger when they leave the field/change the focus
document.getElementById('dateFilter').addEventListener('focusout', function() {
document.getElementById('msgContainer').innerHTML += 'Change triggered<br>';
});
<input type="date" id="dateFilter">
<div id="msgContainer"></div>
I want to receive separate click events from separate lines in a text field, and every time a certain line is clicked by the user, I would like to highlight it and have an event happen.
I would ideally like this to happen with dynamic text, and not have to break the text apart by hand. Using the htmlText property is an option, but I am unsure as to how to bind clickEvents to separate elements.
Where do I begin?
There is no ready to use solution for this. But you can make it yourself using a few things:
set CLICK listener for the whole text field
listen for click and check the caretIndex property
use getLineIndexOfChar to check what's the line of the current caret position
use getLineOffset and getLineLength to get the position of the first and last character of that line
use setSelection to highlight this line
There might be some faster and easier way, but this is what works for sure :)
EDIT: decided to post the solution code, as I was wondering how exactly it works.. and it would be a shame to just leave it unpublished and make you do it instead :)
field.addEventListener(MouseEvent.CLICK, onTfClicked);
function onTfClicked(e:MouseEvent):void {
trace (field.caretIndex);
var line:uint = field.getLineIndexOfChar(field.caretIndex);
var start:uint = field.getLineOffset(line);
var end:uint = start + field.getLineLength(line);
field.setSelection(start, end);
}
I want to use Zebra datapicker... but if I attach it to the input, I can't write somethig different from data which is picked in calendar... so how I can choose what I can write into textbox...
P.S I am using only one textbox in my page
Whilst I'm not familiar with the date picker you mention, it ought to have some means of specifying a callback function that acts as an intermediary between the selected value and what, ultimately, gets put in the text field.
I wrote a date picker some years ago which does this - see the callback_func param.
Without a callback, it inserts the selected date into the field. With a callback, it passes the selected date to the callback and uses the function's return value to decide the new value for the field.
var cal = new Calendar({
callback_field: '#myField',
focusElements: '#myField',
callback_func: function(d, m, y, date) { return 'hijack!'; }
});
You need to use a plugin that validates your keyup event on the text field.
Here's a small piece of code I wrote that does just that:
https://github.com/cassilup/jquery.keyup.validator
Unfortunately, it does not have code for date, but you tweak it freely to suit your needs.
Alternatively, you could assign the text field as readonly and let the datepicker do the date input.
Can someone tell me how I might enable double clicking to select a word in a input textfield?
It should do this by default if you are using a TextField with type TextFieldType.INPUT.
If Spencer's idea doesn't work you could do the following:
Set doubleClickEnabled=true on the TextField.
Add a listener for the DOUBLE_CLICK.
When the listener fires, convert the event's (x,y) to a character index by using TextField.getCharIndexAtPoint.
Search before and after that point for either a space or string end/begin and use those two values to set the selection index.
How to prevent a specific key such as backspace key functioning from TextField editable field, preventDefault does not seem to work:
public function handleEvents(evt:KeyboardEvent):void {
if (evt.type == KeyboardEvent.KEY_UP) {
if (evt.keyCode==8){
evt.preventDefault () ;
}
}
I recommend listening for the KEY_DOWN event if anything, but likely that won't work either. IIRC these type of events are a bit special and you can't really stop them.
What I suspect you need to do is to store a copy of the text and whenever you detect a change you don't like just set it back to your stored version.
What I have done is set focus to another temporary (and off-stage) text field and in my keydown handler return focus to the my text field for the keys I want to get through. Setting focus just for keys you want to filter out also works.
Try adding evt.stopImmediatePropagation()