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.
It is a known OS issue with winjs/uwp app running on a W10 (build 10.240). It has been fixed with W10 TH2 (build 10.586) as mentionned in the following MSDN thread
Related
so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>
I am having an issue where the Screen Reader is not reading the text that changes within aria-live section in FireFox.
This is a simple example for a page where in chrome the Screen Reader reads the changes as they come in and in FireFox it does not:
<div aria-live="assertive" id="moo">
</div>
<script>
let i = 0;
setInterval(() => {
document.getElementById('moo').innerText = 'moo' + i++
}, 2000)
</script>
Am I doing something wrong? Is there another way to announce changes when they come in besides for aria-live that people use with Firefox?
I tested on Mac-Firefox-VoiceOver (it works on Mac-Chrome-VoiceOver)
Current firefox version: 83.0 (64-bit)
Firefox Nightly version：85.0a1 (2020-11-29) (64-bit)
In the latest Nightly version, the combination of aria-live on firefox + voiceOver is fixed! 🎉 Hooray!
Reference:
Firefox/Voiceover: aria-live regions not being announced
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aria-live Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
margin: 1em;
}
button {
margin-top: 1em;
display: block;
}
</style>
</head>
<body>
<h1>Aria-live Demo</h1>
<p>Testing <code>aria-live</code><br><button>Add Content</button><button id="add-more" >Add more content</button></p>
<!-- add aria-live="polite" -->
<div class="target" aria-live="polite" ></div>
<script type="text/html" id="test-content">
<h2>Custom Content</h2>
<p>Hello there! I am content that is going to be plunked into a container via javascript</p>
</script>
<input placeholder="messgae somebody"/>
<script>
$("button").on("click", function(){
$(".target").html($("#test-content").html());
});
$("#add-more").on("click", function(){
$(".target").append("<p>Hello World</p>");
});
$(document).on("keydown", function(e){
// press space to add content
if(e.keyCode === 32) {
$(".target").append("<p>Hello World</p>");
}
});
</script>
</body>
</html>
I am trying to build a simple chrome New Tab extension where the extension takes an input from the user via a text field and then displays it.
My app.js has the following code:
document.onkeydown = function(e) {
if (e.keyCode == 13) {
if ($('#spark').value !== null) {
// console.log("Hello")
var string = $('#spark').val();
// console.log(string);
chrome.storage.sync.set({"myKey": string});
$('#spark').hide();
chrome.storage.sync.get("myKey", function(string) {
$('#text').append(string.myKey);
});
}
}
});
The HTML page has a div 'spark' which is the input form and a div 'text' where the text inputted in 'spark' should be displayed and is as follows:
<html>
<head>
<title>Blank New Tab</title>
<script src="app.js"></script>
<script src="jquery.min.js"></script>
<style>
div {
color: #cccccc;
vertical-align: 50%;
text-align: center;
font-family: sans-serif;
font-size: 300%;
}
</style>
</head>
<body>
<div style="height:40%" id='body'>
<div id="text"> </div>
</div>
<div>
<form>
<input type="text" name="spark" id="spark">
</form>
</div>
</body>
</html>
When I run this extension, the text gets displayed for a millisecond and then rests to the original page with the input. Here's a gif of that: http://imgur.com/XySGg4X
How do I get the text to persist on the New Tab page? Once the user types in the message and presses enter, the input form should be hidden and the page should display the text entered by the user.
I'm starting to learn HTML5+CSS+JS. It was all going fine on my Windows desktop, but when I try doing something on my Linux notebook, no javascript seems to work.
This is the mini tutorial I followed: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript
and this is my page with the result: http://www.lele.bbt.net.ar/prueba01/
(As you can see, the JS is not doing a thing).
// JavaScript demonstration
var changeBg = function(event) {
console.log("method called");
var me = event.target,
square = document.getElementById("square");
square.style.backgroundColor = "#ffaa44";
me.setAttribute("disabled", "disabled");
setTimeout(function() {
clearDemo(me)
}, 2000);
}
function clearDemo(button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);
#square {
width: 120px;
height: 120px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
</body>
</html>
(Here it works, but for some reason, not when I do it on my computer).
I don't know if it can be a priviledge problem or something like that (js has read/write priviledges, not execute. But I guess that's how it should be)
Thanks!
I'm pretty sure it's because the script can't find the button.
You load your script before everything else is loaded, which is fine. But you can have problems like this. To avoid this kind of problems you load the JavaScript file after the HTML.
At the moment if you try to print the var "button" you will receive "null".
The Chrome console when you open the page gives you this error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
That means that it is trying to read the property of the button, which is null.
Move the script tag to the very end, just before the closing </body> tag:
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
<script type="text/javascript" src="script.js"></script>
</body>
I am using the following code to access the camera but aim is to read QR codes using camera.
Using the following code I can only take the picture and save it then using my backend read the QR code from the saved file.
How can I modify the code to process the picture while the camera is reading.
Or something like sending the streams to the back-end and once the QR code is detected it notifies the user.
I need to work with a tablet.
I can use the following to record videos as well but how to send the streams to back-end
<input type="file" capture="camera" accept="video/*">
My code to take pictures
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>ColorThief Demo</title>
<script type="text/javascript" charset="utf-8" src="jquery-2.0.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="quantize.js"></script>
<script type="text/javascript" charset="utf-8" src="color-thief.js"></script>
<style>
#yourimage {
width:100%;
}
#swatches {
width: 100%;
height: 50px;
}
.swatch {
width:18%;
height: 50px;
border-style:solid;
border-width:thin;
float: left;
margin-right: 3px;
}
</style>
</head>
<body>
<input type="file" capture="camera" accept="image/*" id="takePictureField">
<img id="yourimage">
<div id="swatches">
<div id="swatch0" class="swatch"></div>
<div id="swatch1" class="swatch"></div>
<div id="swatch2" class="swatch"></div>
<div id="swatch3" class="swatch"></div>
<div id="swatch4" class="swatch"></div>
</div>
<script>
var desiredWidth;
$(document).ready(function() {
console.log('onReady');
$("#takePictureField").on("change",gotPic);
$("#yourimage").load(getSwatches);
desiredWidth = window.innerWidth;
if(!("url" in window) && ("webkitURL" in window)) {
window.URL = window.webkitURL;
}
});
function getSwatches(){
var colorArr = createPalette($("#yourimage"), 5);
for (var i = 0; i < Math.min(5, colorArr.length); i++) {
$("#swatch"+i).css("background-color","rgb("+colorArr[i][0]+","+colorArr[i][1]+","+colorArr[i][2]+")");
console.log($("#swatch"+i).css("background-color"));
}
}
//Credit: https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player
function gotPic(event) {
if(event.target.files.length == 1 &&
event.target.files[0].type.indexOf("image/") == 0) {
$("#yourimage").attr("src",URL.createObjectURL(event.target.files[0]));
}
}
</script>
</body>
</html>
Capturing the video and sending it to the server will be prohibitively bandwidth-intensive on a mobile device. I would give jsqrcode a try and do it all client-side in JavaScript. Also, see this answer.
You need to have a look at the Stream API. There are some demos at the bottom of Eric Bidelman's blog post.