I just started looking at Dart. I am updating a <p> tag when editing an <input type="form">.
However, when I use the onKeyDown event, it is not updating instantly but is delayed by 1 keypress. So if I press AAA it will only display AA.
If I use onKeyUp, AAA will give me AAA.
Why is it not updating as expecting when using onKeyDown?
Here is the code:
import 'dart:html';
TextInputElement inputText;
ParagraphElement pargraphText;
void main() {
inputText = querySelector("#text");
pargraphText = querySelector("#paragraphText");
// inputText.onKeyDown.listen(updateTekst);
inputText.onKeyUp.listen(updateTekst);
}
void updateTekst(Event e) {
pargraphText.text = inputText.value.toUpperCase();
}
That is because the input element doesn't have the value yet. It gets the value on keyPress or keyUp but not yet on keyDown.
If you use the value from the event instead from the input field, then you get the value even for the first keyDown.
You can use e.keyCode (charCode is not set on keyDown)
import 'dart:convert';
...
// doesn't distinguish between upper/lower case (you have to check e.shiftKey)
UTF8.decode([e.keyCode]);
Related
I am using in one of the lightning components and I am using it to filter a table. But when I'm trying to get its value in JS controller with the keyup function, it's giving one less value than actual.
This question has been already asked for HTML here , But for HTML, we have a solution that we can use onkeyup instead of keyup.
But in salesforce lightning, we don't have any onkeyup function for ui:inputText Source ,
So how to solve this issue?
I have already tried keypress, keyup, keydown.
All are giving one less value than actual one
Component :
<ui:inputText aura:id="search-phrase" class="slds-input" keyup="{!c.filterTable}" placeholder="Search Table" />
JS Controller :
, filterTable :function(component, event, helper) {
var dynamicVal = component.find("search-phrase");
var week = dynamicVal.get("v.value") ;
alert((week+'').toLowerCase());
var searchTerm = (week+'').toLowerCase() ;
$('#userTbl tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
}
I found it's solution.
Just need to add updateOn="keyup" in <ui:inputText>
So new one will become :
<ui:inputText aura:id="search-phrase" class="slds-input" updateOn="keyup" keyup="{!c.filterTable}" placeholder="Search Table" />
Include updateOn attribute to ui:inputtext control. By default, it is mapped to change event so you will get only the exact value when the change event fires. updateOn="eventName"
event details : enter link description here
I have a dropdown with values-Name,MobileNumber and a input text-box related to the selected dropdown.
I want to limit the textbox entry values with only alphabet when Name is selected from the dropdown and only Numbers when MobileNumber is selected. This I am achieving by adding the below thing.
*
On(dom.byId("dropdownid"), "keypress", function(e)){
if(dom.byId("dropdownid").value=="Name"){
On(dom.byId("textboxid"), "keypress", function(e){
if(RegularExpressionAlphabetOnlyCondition == e.charCode){
Stopping the event using e.stopEvent();
}
});
}
if(dom.byId("dropdownid").value=="MobileNumber"){
On(dom.byId("textboxid"), "keypress", function(e){
if(RegularExpressionNumbersOnlyCondition == e.charCode){
Stopping the event using e.stopEvent();
}
});
}
});
*
Now on change of the dropdown value I am adding change event for dropdown and adding similar keypressevent with regularexpression condition of only numbers.
But its not working and accepting only alphabet still. It is apparently not replacing the already placed keypressevent.
How to remove the Keypress event in dojo for a textbox on change of a dropdown value?
The on Function returnes a handle
var h = On(dom.byId("textboxid"), "keypress", function(e){console.log("do Stuff"});
You can then use the handle to cancel it listener before doing a new one
if(h)h.remove();
I have a input field that is formatted with the data-format HH:mm:ss PP. When the timepicker is clicked the focus on the input field don't appear that's why I couldn't use onblur event. What i want is like keydown or keyup event but it seems doesn't work in my case because focus is out in the input field so what jQuery event should i used?
change seems to work fine:
Fiddle
$("#datepicker").datepicker()
.on("change", function () {
console.log("Changed");
});
Example is with datepicker(), I'm not sure what your timepicker implementation is as it's not in the jquery(ui) api. But it should work as well.
Edit: after looking at the datetimepicker you are using, based on the DOM I'm seeing as a result of datetimepicker() - I think this should work for you:
Fiddle
$('#datetimepicker1').closest(".well").next(".bootstrap-datetimepicker-widget").on("click", "*", function () {
console.log("Changed");
});
Just make sure this is after your datetimepicker() call. Note that this will be triggered on any click within your calendar/time picker even if it is a click on something that is already selected (no change).
If you want, you could store the last value of your input and then check that if it changed before continuing with this event callback function. If it did change, be sure to update the variable you are holding the "last value" in... something like this.
If possible, the best option would actually be to modify datetimepicker()'s js to call a function or trigger an event from the same place it updates the text input. Looking at the code:
set: function () {
var formatted = "";
if (!this._unset) formatted = this.formatDate(this._date);
if (!this.isInput) {
if (this.component) {
var input = this.$element.find("input");
input.val(formatted);
input.trigger("change"); // added this
this._resetMaskPos(input)
}
this.$element.data("date", formatted)
} else {
this.$element.val(formatted);
this.$element.trigger("change"); //added this
this._resetMaskPos(this.$element)
}
},
With the two lines I added above, you should be able to rely on a change event bound to the input element.
here is my datefield:
<mx:DateField id="date"
formatString="DD-MM-YYYY" selectableRange="{DTselectableRange}"
change="handleChange()" editable="true" clear="dateCleared(event)"/>
i want to detect clear event, adobe ref say:
clear Event is dispatched when the user
selects 'Clear' (or 'Delete') from the
text context menu.
but dateCleared function in never called...I need it beacause I have to set selectedDate to null when user delete it...
Please help me...
I can confirm that mx.controls.DateField does not dispatch a clear event when selecting "Delete" from the text content menu. I've also had no luck getting a clear event to be dispatched for editable mx.controls.TextInput and spark.components.TextInput. Hmm....
What you can do is handle a change in the value of the control in your handleChange event listener and set your selectedDate value there.
Something like this:
private var selectedDate:Date;
private function handleChange(date:Date):void {
if (date == null) {
selectedDate = null;
}
// your existing handleChange code here
}
Also, I would change this:
<mx:DateField change="handleChange()" />
to this
<mx:DateField change="handleChange(DateField(event.target).selectedDate)" />
I have textbox whose value if entered needs to be validated using some regularexpression
I need to validate the value as user is entering the data.
Which is suitable event can be used for this ? some sample example of using onfocus event on textbox will be helpful
Use onKeypress or onKeyup.
Beginners often think that onChange will do what you want, but that only fires when the input loses the focus.
OnFocus is irrelevant - that is when the box first gets the focus, not when the user types.
Typically you would do this when the text input loses focus, so it would be using the blur event. The reason is that many inputs aren't valid until some sufficient number of characters has been typed. It can be very annoying to the user to put up a validation error while they are still typing a valid string. For example, when doing email validation, the input cannot be valid until the # sign has been entered. Note that you'd also need to validate when the form is submitted to catch the case where the field has never had focus.
Using jQuery it might look like:
$('.klass').blur( function() {
if (!$(this).val().match( /your-regular-expression/ )) {
$(this).next('.validation-message').show();
return false; // keep focus on field
}
return true;
});
This assumes some HTML like
<input type="text" class="klass" name="myInput" />
<span class="validation-message" style="display: none;">This is not valid</span>
To stop the user from writing invalid characters, or to validate the fields as he types you can use .onkeypress.
document.getElementById(fieldId).onkeypress = onkeypressHandler;
var onkeypressHandler = function (event) {
var eKey = event.charCode;
var str = String.fromCharCode(eKey);
var pattern = /[^0-9]/g;
var strTmp = str.replace(pattern, "");
if (str!== strTmp) {
return false;
}
return true;
}
In this example the only valid characters are numbers, if the pressed key is not a number then the function will return false and the key will be ignored.
Also validate a field after the user is done typing you can use .onchange
document.getElementById(fieldId).onchange= onChangeHandler;