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.

1 Answer 1

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

4
  • 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. Jul 31, 2016 at 19:10
  • Hmm. When I went to do it, I couldn't make it work. I've expanded my question, above. Aug 1, 2016 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, 2016 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. Aug 1, 2016 at 13:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .