Change event on TextField inside ListView Template

Question

I've a ListView Template, that has a title Label, 2 button Views (more and less) and a TextField with a value, I need to add a change event to this TextField.

<ItemTemplate name="item" id="item" bindId="item">
    <View id="row" bindId="row">
        <Label bindId="title" id="title"/>
        <View id="options" bindId="options">
            <View class="option" bindId="less" id="less"/>
            <TextField bindId="input" id="input"/>
            <View class="option" bindId="more" id="more"/>
        </View>
    </View>
</ItemTemplate>

In the change event I want to add a validation to check if the value is a number like this:

$.input.value = parseFloat(($.input.value.toString().replace(/,/g, '.')).replace(/[a-zA-Z ,_$#%&()~ºª´`'+*:;]/g,''));

The less and more buttons are working, its a simple increment/decrement, but I can't add the listener to the input, I've tried this 2 ways:

$.car.addEventListener('itemclick',function(list) {

    var row = $.car.sections[0].getItemAt(list.itemIndex);

    if(list.bindId == 'more') row.input.value++;
    if(list.bindId == 'less') row.input.value--;

    //tried this 1#: row.input.addEventListener('change',function() {});

    $.car.sections[0].updateItemAt(list.itemIndex,row);
});

//tried this 2#: $.input.addEventListener('change',function() {});

Note that I only need to use the listener when the row is clicked, every time that I change the input value or use one of the buttons, I know the index of the ListItem

Answer 1

I don't know if it's the best approach, but what I'll try is to create an hidden TextField, when I click the ListItem's TextField, blur the hidden TextField, and on the change event it will update the ListItem's TextField with the same value