Missing eye icon in a password field when using template tag
Question
I understand, why I see no eye icon in a input field with type "password", when I use the template tag. For this example, I create a simple single HTML file:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
document.addEventListener('click', () => {
/* It's not ok. (Second) */
const templateNode = document.getElementById('testTemplate');
const cloneNode = templateNode.content.cloneNode(true);
document.body.insertBefore(cloneNode, null);
/* It's ok. (Third) */
const form = document.createElement('form');
const input = document.createElement('input');
input.type = 'password';
form.appendChild(input);
document.body.appendChild(form);
}, { 'once': true });
</script>
</head>
<body>
<!-- Second //-->
<template id="testTemplate">
<form>
<input type="password">
</form>
</template>
<!-- First //-->
<form>
<input type="password">
</form>
</body>
</html>
You can run this local or on a server. I try it with Edge or Chrome. It's the same effect. After you click in the document, two input fields as type "password" added. The first input field shows the eye icon. The second (from template) has no eye. The third input field (created with the method createElement) has the eye, again.
I know, how I can toggle this with javascript, but I am trying to understand, where the error is. I don't think, it's a bug. I have the same result, when I split the files (html, javascript).
Thanks for your clarification.
2 answers
solution1
0 2021-04-11 01:01:53
You can't see current html element because it is used as a holder of an html, this element is not rendered by html but can be used by JavaScript (example: copying items), you could use an "iframe" as tag by setting up scr="" option with url (ex. scr="https://stackoverflow.com", the page should be on your server, it wouldn't load from any other sources) to html page if you want item to appear.
some documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
solution2
0 ACCPTED 2021-04-11 06:50:23
Thanks for the answer.
I was firmly convinced that this eye icon is now displayed by default. But with Chrome, Firefox and Edge only Edge shows this eye....
Now about the problem in Edge. The link to the template tag was helpful, even if I already knew it. The content of the template tag is only parsed. If this is then added to the DOM with cloneNode, then it is rendered (as I understand it).
What was the solution now? In the german version of this article importNode is used instead of cloneNode. I'm from German.
I changed these lines:
const templateNode = document.getElementById('testTemplate');
const cloneNode = document.importNode(templateNode.content, true);
document.body.insertBefore(cloneNode, null);
https://developer.mozilla.org/de/docs/Web/HTML/Element/template
So the Edge shows this eye icon after adding it. Where the exact difference between cloneNode and importNode lies, I don't know yet. There I have to read again.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.