Let's follow up this discussion at the Neptune Community

(this forum will be kept in read-only mode)
Answered

Enter Event in input fields

Hello,
I am referring to following example:

Develop your first SAPUI5 mobile application


On the second screen there is the Input field with which I search for customers. Everything works well if I hit the search button in the footer. But when I hit the enter button in the field the application navigates to the first screen where the tile is displayed (like the back button).


Can I set a button of the taskbar as Default button which is triggered when enter is hit within a form. Or can I register the "enter" Event.


Christian


Best Answer

Hello Christian,


In the "Header" tab of NAD, you could try the below code to intercept the "ENTER" keypress and launch the search by the same occasion :


<script type="text/javascript">

function interceptReturnKey(evt)

{

    var evt = (evt) ? evt : ((event) ? event : null);

    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

    if ((evt.keyCode == 13) && (node.type=="text"))

    {

        getOnlineSearchList();

        return false;

    }

}

document.onkeypress = interceptReturnKey;

</script>


Best regards.



PEB


Answer

Hello Christian,


In the "Header" tab of NAD, you could try the below code to intercept the "ENTER" keypress and launch the search by the same occasion :


<script type="text/javascript">

function interceptReturnKey(evt)

{

    var evt = (evt) ? evt : ((event) ? event : null);

    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

    if ((evt.keyCode == 13) && (node.type=="text"))

    {

        getOnlineSearchList();

        return false;

    }

}

document.onkeypress = interceptReturnKey;

</script>


Best regards.



PEB

Thank you very much - that did work for the example.

Would  it not be nice to have an Attribute field where I could put down the Javascript code. for enter Events? As far as I can understand the code I would be able to handle different Input fields via the node, right?


It was a bit of a struggle because I put a Form in the search page which apparently has destroyed the binding of the Input field to the model. Therefore the application moved to the result page but without restricting the list.


Have a great day,

Christian

Hi Christian,


You're right, for different input fields, the "node" variable can be used as the value of "node-id" will be the name of your UI element defined in NAD followed by "-inner". For the attribute field to put the JavaScript code, I'll let people from Neptune answer about the possibility, thanks in advance :-)


There is also the alternative to use the "SearchField" UI element in NAD : http://support.neptune-software.com/support/articles/131281- , which doesn't need to introduce JavaScript as the Search event is triggered by "ENTER" button in addition of pressing on the Search icon.


Best regards.



PEB

Hi Christian and Pierre


In support package 3 we have decided to implement a global ENTER submit prevent. The event for an input field will then be the change event, so pressing ENTER key will trigger that event for input fields. 


jQuery(function() { jQuery("form").submit(function(event) { event.preventDefault(); return false; }); })


Regards

Ole Andre

Hello Ole André,


Very useful new feature for the SP3, thank you ! :-)


When will be released the SP3 please ?


Best regards.



PEB

Hi


The Support Package 3 are planned for release on friday the 13. June. 


Regards

Ole Andre

Login or Signup to post a comment