In my Angular app, I have integrated a JQuery + Bootstrap keyboard that is designed exclusively for touch input. If I try to use the mouse to click on the keys, the keyboard closes without registering any keystrokes, as it is programmed to close on click events.
Mobile-first-Virtual-Keyboard-Plugin-With-JQuery-Bootstrap
I am encountering an issue when trying to bind input from a text box in my controller using ng-model as shown in the following code:
<input autocomplete="false" class="textInputSeeThrough keyboard"
ng-model="patientNIC" type="text" id="nic"
name="patientNICTxtbox" autofocus
placeholder="--- ENTER NIC NUMBER ---">
The input data does not bind correctly. However, if I manually access the element value using plain JavaScript instead of relying on $scope in the controller, I am able to retrieve the value successfully.
var val1 = $scope.patientNIC; // this doesn't work
var val2 = document.getElementById("nic"); // this works
alert(val1);
alert(val2.value);
This inconsistency indicates that the issue is not related to the Keyboard itself. Could there be a potential problem with AngularJS interacting with touch events? After researching, I have not found any known issues. Can anyone provide insights into why this discrepancy is occurring? Thank you in advance.