phone keypad does not open with focus() in javascript - javascript

const input = document.getElementById("input");
document.addEventListener("DOMContentLoaded", init);
function init() {
input.focus();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>hola</h1>
<input type="text" id="input" />
<script src="app.js"></script>
</body>
</html>
How can I make the keyboard open in the phone's browser? Try with focus() but it only appears blinking and the input is selected, but the keyboard does not open automatically, please, if someone knows how I can solve it, I would greatly appreciate it.

Related

How do you add a badge to a website's bookmark icon?

For example on chrome, the WhatsApp Web bookmark icons shows your current message count, Reddit has a red dot and even LinkedIn displays the icon with a blue dot on the top left corner when you have notifications. A point in the right direction on how to achieve this will be greatly appreciated.

It is possible to dynamically change the icon of a favorite by changing the href of favicon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic favicon</title>
<link rel="icon" id="favicon" href="./icons/icon_without_dot.png" type="image/png" />
</head>
<body>
<h1>Dynamic favicon</h1>
<button onclick="toggleFavicon()">Change favicon</button>
<script>
const favicon = document.getElementById("favicon");
function toggleFavicon() {
if (favicon.getAttribute("href") == "./icons/icon_without_dot.png") {
favicon.setAttribute("href", "./icons/icon_with_dot.png");
}else{
favicon.setAttribute("href", "./icons/icon_without_dot.png")
}
}
</script>
</body>
</html>

How do I source files on a custom html tag?

I am trying to create my own computer language but can't get the src attribute to work. Is there a way to get the source code to "paste" to the inner text of the element?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h1 id="p"></h1>
<space-lang src="Testing.txt">
</space-lang>
</head>
<body>
<script src="space.js">
</script>
</body>
</html>

Unable to read the value of input text in arabic language in the same way I typed in Javascript

I am trying to read the value of an input text field entered in the Arabic language using javascript.
But as you can see in the screenshot it's not fetching the text in the same way I typed.
The number '123' which is on the right side of the input field is jumping to the left side when I try to read the entered input field value using js code.
Please help me to solve this issue.
Below is the code that I am using:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html:lang(ar){
direction: rtl;
}
</style>
</head>
<body>
<input type="text" dir="rtl" name="" id="textbox">
</body>
</html>
Thanks in advance :)

If you output the Arabic RTL text in the console, it will be shown in the LRT direction. If you output the text in another Html field with RTL set for that field it will display correctly
Here is an example. Output the Arabic text into another field will be displayed correctly.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html:lang(ar){direction: rtl;}
</style>
</head>
<body>
<input type="text" id="inputText" oninput="outputIt()">
<div id="outputText"></div>
</body>
<script>
function outputIt() {
document.getElementById("outputText").innerHTML = document.getElementById("inputText").value;
}
</script>
</html>

threejs cannot be found

Hi I am trying to build the "get started" application from the threejs website. https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
I made a html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script>"/js/three.min.js"</script>
<script type="module" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>
I specified my view.js as a module since I want to be able to use the import statement to import my typescript files, but when I try to show my application in the browser I get the message THREE not found.
I tried adding it with yarn but it does not work.
This is my structure

Your three.min.js file is wrongly included. Your HTML should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>

Why doesn't the text inside my text field disappear on click?

In the following example
http://twitter.github.com/bootstrap/base-css.html#forms
There is a text field with text "Type something..." which disappears upon click
I have included my nearly identical code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet">
</head>
<body>
<input type="text" class="span3" placeholder="Type something…"> <span class="help-inline">Associated help text!</span>the
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
</body>
</html>
Can somebody tell me why my text does not disappear upon clicking?

I am using Chrome and the text does not disappear upon clicking. It disappears after writing into it. When you delete the input, the placeholder appears again.

Categories