2

If I use this code for my input box to take an email address:

<input type="email" onkeyup="{!c.sendSearchKeyChange}"/>

The event sent to sendSearchKeyChange has a prototype of KeyboardEvent. And, most important to me, I can say event.target.value, and find out the value of the input box.

If I code the input box like this:

<ui:inputEmail keyup="{!c.sendSearchKeyChange}"/>

The event sent to sendSearchKeyChange has a prototype of just plain Object. And event.target.value is undefined.

I thought the keyup attribute supported by just went straight through to the same place the onkeyup attribute goes to on the regular html element, but I guess not. Is the event that is sent documented somewhere?


(After getting an answer suggesting how to code it.)
Actually, when I define a data attribute like this:

<aura:attribute name="thePhoneNumber" type="String"/>

And set up my input element like this:

<ui:inputPhone aura:id="phone" label="phone" placeholder="123-456-7890" 
               value="{!v.thePhoneNumber}" keyup="{!c.sendPhoneKeyChange}"/>

And have my controller like this:

sendPhoneKeyChange: function(cmp, event, helper) {
    var target = event.getSource();
    var theValue = target.get('v.value');
    console.log('theValue', theValue);
    theValue = target.get('v.thePhoneNumber');
    console.log('theValue', theValue);
    var myEvent = $A.get('e.c:PhoneKeyChange');
    myEvent.setParams({searchKey: theValue});
    myEvent.fire();
}, 

I get an undefined for theValue, whether I use v.value or v.thePhoneNumber. I don't know why.

3

To perform what you are trying to do, you just have to make these modifications to your code:

<ui:inputEmail keyup="{!c.sendSearchKeyChange}" updateOn="keyup"/>

({
    sendSearchKeyChange : function(component, event, helper) {
        var email = event.getSource().get("v.value");
    }
})

some reference here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_inputText.htm https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_client_side_controller.htm

  • 1
    Yeah. That will work. I need to focus less on how the object is defined, and more on how to do the task I need to do. – user2171796 Jul 31 '16 at 19:10
  • Hmm. When I went to do it, I couldn't make it work. I've expanded my question, above. – user2171796 Aug 1 '16 at 2:15
  • Remember to change your ui:inputEmail to updateOn="keyup", the default is on change (when you do onblur). If you don't change this property the v.value of the input won't be updated when you do keyup. Change this <ui:inputPhone aura:id="phone" label="phone" placeholder="123-456-7890" value="{!v.thePhoneNumber}" keyup="{!c.sendPhoneKeyChange}"/> to this <ui:inputPhone aura:id="phone" label="phone" placeholder="123-456-7890" value="{!v.thePhoneNumber}" keyup="{!c.sendPhoneKeyChange}" updateOn="keyup"/> – D. Cruz Aug 1 '16 at 2:54
  • That works! My html - javascript skills won't transfer directly, it seems. I'll have to treat writing code in Aura as a new problem. Thanks for the help. – user2171796 Aug 1 '16 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.