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

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.

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>

phone keypad does not open with focus() in 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.

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>

Image is not displayed in print preview

I am learning print.js, but I am having trouble printing the image. I tried to called printJS but the image is not displayed in the print preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css"/>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<title>Document</title>
</head>
<body>
<image src="test-01.jpg"/>
<button type="button" onclick="printJS('test-01.jpg','image')">
Print
</button>
</body>
</html>

Webview tag not working for my chrome app

So I have been trying to load google in my app using this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Webview</title>
<meta name="description" content="">
<meta name="author" content="Kitanga Nday">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
<script src="kng.js"></script>
</head>
<body>
<div id="kontainer"> <!-- Kontainer div -->
<webview src="https://www.google.com/" width="640" height="480"></webview>
</div>
</div>
</body>
I then tried sandboxing the page and running it in the main html file using the iframe tag still nothing.
Maybe you missed the fact that using <webview> requires a "webview" permission in the manifest.

Categories