Windows Virtual keyboard is not showing when app is running in touch mode (tablet device/simulator) and I'm manually triggering focus() on input. Instead keyboard shows when tapping anywhere on body (meaning that input is focused). Hoverer when running application as a regular desktop app with mouse input (instead of touch) - everything works well.
So the question is how to avoid such behaviour or at least how to manually display virtual keyboard when input is focused?
I'm using WinJS.4.0 4.0.0.winjs.2015.6.9.
Sample code to replicate the issue:
default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
</head>
<body class="win-type-body">
<div id="container">
<div id="text-holder">
Input value will be displayed here
</div>
<div id="input-holder">
<form id="form">
<input id="input" value="" type="number"></input>
</form>
</div>
</div>
<script src="/js/default.js"></script>
</body>
</html>
default.js
(function () {
var input = document.getElementById('input');
var form = document.getElementById('form');
var textHolder = document.getElementById('text-holder');
form.addEventListener('submit', function (e) {
e && e.preventDefault();
textHolder.innerText = input.value;
input.value = "";
input.blur();
});
textHolder.addEventListener('click', function (e) {
console.log(e);
input.focus();
});
})();
default.css:
body {
background-color: #fff;
}
#container {
width: 100%;
height: 100%;
}
#text-holder {
width: 200px;
height: 50px;
background-color: #191A15;
color: #fff;
}
Visual guidance:
Step 1:
Step 2:
Thanks for your interest, hope this problem is solvable.
