Skip to Content
0

sap.m.Input change event is triggered when clicking on CheckBox

Jun 07, 2017 at 08:47 AM

296

avatar image
Former Member

I have two controls in my page i.e. sap.m.Input and sap.m.CheckBox. There is a change event attached to input field which gives an error bar if input text is not matched with the regex. This change event is triggered on clicking out of focus of the input field. Clicking on checkbox will hide this input and show a third control. Now if i enter something in input field which will not match regex and click on checkbox, It is triggering changeEvent of Input and not even selecting the checkbox. I tried many things like checking in change event whether checkbox is ticked or not, attached a click event on checkbox but no solution. Please help me so that i will be able to determine the click on checkbox if the current focus is on input field.

Here is an example at jsbin.

var textInput = new sap.m.Text({text:"Area:"})
var inputField =new sap.m.Input("inptId",{
  change:function(oEvent){

    sap.ui.getCore().byId("barId").setVisible(oEvent.getParameters().value.includes("@"));

  }
});

var select  = new sap.m.Select("select",
                               {visible:false,
                                items:[new sap.ui.core.Item({text:"India"}),
                                      new sap.ui.core.Item({text:"US"}),
                                       new sap.ui.core.Item({text:"UK"})
                                      ]
                               })
var hBox = new sap.m.HBox({items:[textInput,inputField,select]})

  var bar = new sap.m.Bar("barId",{
    visible:false,
    contentMiddle:new sap.m.Text({text:"Error"})
  });

  var chkBox = new sap.m.CheckBox("chkBxId",{
  text:"Select from dropdown",
  select:function(oEvent){        
    var selected = oEvent.getParameters().selected;
    sap.ui.getCore().byId("inptId").setVisible(!selected);
     sap.ui.getCore().byId("select").setVisible(selected);
    sap.ui.getCore().byId("barId").setVisible(false);
  }
});
var vBox = new sap.m.VBox({
  items:[bar,hBox,chkBox]
});

Here error will be thrown if input text contains @ and change event is triggered.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Akhilesh Upadhyay Jun 07, 2017 at 09:21 AM
0

write your logic in keypress event instead of change event, as below:

inputField.attachBrowserEvent("keypress", function(oEvent) {
  sap.ui.getCore().byId("barId").setVisible(oEvent.key.includes("@"));
});

above code triggers as soon as you enter any key in input field.

Share
10 |10000 characters needed characters left characters exceeded