We Keep Coding

html show hide password not working mobile [duplicate]

How can I do this through the tag itself?
Change type from text to password
<input type='text' name='pass' />
Is it possible to insert JavaScript code inside the input tag itself to change type='text' to type='password'?

Try:
<input id="hybrid" type="text" name="password" />
<script type="text/javascript">
document.getElementById('hybrid').type = 'password';
</script>

Changing the type of an <input type=password> throws a security error in some browsers (old IE and Firefox versions).
You’ll need to create a new input element, set its type to the one you want, and clone all other properties from the existing one.
I do this in my jQuery placeholder plugin: https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L80-84
To work in Internet Explorer:
dynamically create a new element
copy the properties of the old element into the new element
set the type of the new element to the new type
replace the old element with the new element
The function below accomplishes the above tasks for you:
<script>
function changeInputType(oldObject, oType) {
var newObject = document.createElement('input');
newObject.type = oType;
if(oldObject.size) newObject.size = oldObject.size;
if(oldObject.value) newObject.value = oldObject.value;
if(oldObject.name) newObject.name = oldObject.name;
if(oldObject.id) newObject.id = oldObject.id;
if(oldObject.className) newObject.className = oldObject.className;
oldObject.parentNode.replaceChild(newObject,oldObject);
return newObject;
}
</script>

Yes, you can even change it by triggering an event
<input type='text' name='pass' onclick="(this.type='password')" />
<input type="text" placeholder="date" onfocusin="(this.type='date')" onfocusout="(this.type='text')">

Here is what I have for mine.
Essentially you are utilizing the onfocus and onblur commands in the <input> tag to trigger the appropriate JavaScript code. It could be as simple as:
<span><input name="login_text_password" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="this.select(); this.setAttribute('type','text');" /></span>
An evolved version of this basic functionality checks for and empty string and returns the password input back to the original "Password" in the event of a null textbox:
<script type="text/javascript">
function password_set_attribute() {
if (document.getElementsByName("login_text_password")[0].value.replace(/\s+/g, ' ') == "" ||
document.getElementsByName[0].value == null) {
document.getElementsByName("login_text_password")[0].setAttribute('type','text')
document.getElementsByName("login_text_password")[0].value = 'Password';
}
else {
document.getElementsByName("login_text_password")[0].setAttribute('type','password')
}
}
</script>
Where HTML looks like:
<span><input name="login_text_password" class="roundCorners" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="password_set_attribute();" /></span>

let btn = document.querySelector('#btn');
let input = document.querySelector('#username');
btn.addEventListener('click',()=> {
if ( input.type === "password") {
input.type = "text"
} else {
input.type = "password"
}
})
<input type="password" id="username" >
<button id="btn">change Attr</button>

I had to add a '.value' to the end of Evert's code to get it working.
Also I combined it with a browser check so that the input type="number" field is changed to type="text" in Chrome since 'formnovalidate' doesn't seem to work right now.
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
document.getElementById("input_id").attributes["type"].value = "text";

This is a simple toggle with jQuery. It works also with the the ASP.NET MVC EditorFor() when you have a DataType.Password on the model property.
function showPassword() {
let password = $(".password");
if (password[0].type == "password") {
password[0].type = "";
}
else {
password[0].type = "password";
}
}

$(".show-pass").click(function (e) {
e.preventDefault();
var type = $("#signupform-password").attr('type');
switch (type) {
case 'password':
{
$("#signupform-password").attr('type', 'text');
return;
}
case 'text':
{
$("#signupform-password").attr('type', 'password');
return;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="password" class="show-pass">

This is not supported by some browsers (Internet Explorer if I recall), but it works in the rest:
document.getElementById("password-field").attributes["type"] = "password";
or
document.getElementById("password-field").attributes["type"] = "text";

You can try this:
const myTimeout = setTimeout(show, 5000);
function show() {
document.getElementById('pass').type = "text";
}
clearTimeout(myTimeout);

//html
<input type="password" id="password_input">
<i onclick="passwordDisplay()" class="ti-eye"></i>
//js
const input = document.getElementById("password_input")
function passwordDisplay() {
if (input.attributes["type"].value == "text")
input.attributes["type"].value = "password"
else
input.attributes["type"].value = "text"
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function changefield(){
document.getElementById("passwordbox").innerHTML = "<input id=\"passwordfield\" type=\"password\" name=\"password-field\" title=\"Password\" tabindex=\"2\" />";
document.getElementById("password-field".focus();
}
</script>
</head>
<body>
<div id="passwordbox">
<input id="password-field" type="text" name="password-field" title="Password"onfocus="changefield();" value="Password" tabindex="2" />
</div>
<input type="submit" name="submit" value="sign in" tabindex="3" />
</body>
</html>

How do I create an error alert for an invalid input?

I am creating a date input and I want an error alert if the date input is left blank.
currently I have and it doesnt work:
<!Doctype html>
<html>
<head>
<script type="text/javascript">
function validateDate(value) {
var a = document.getElementById("date").value;
if (a = = = "") {
window.alert("Error");
return false;
}
}
</script>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type=“date” id=“date” name=“date”><br>
<button id=teeTime onClick="validateDate()">Submit</button><br>
</div>
</form>
</body>
</html>

Do not put spaces in your operators, use === not = = =, a better use to say if a !== "" if a is NOT an empty string
Try this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type="date" id="date" name="date" /><br />
<button id="teeTime">Submit</button><br />
</div>
</form>
<script type="text/javascript">
var button = document.getElementById("teeTime");
function validateDate(value) {
if (value === "") {
window.alert("Error");
return false;
}
}
button.addEventListener("click", function (e) {
var value = document.getElementById("date").value;
validateDate(value);
});
</script>
</body>
</html>

JavaScript input/output

JavaScript code is not reading my input in which is a name and should
have output saying Maurice is a very nice name. I think their is a
grammatical error that I am missing in my divOutput.
The program should take name input and output "Maurice is a very nice
name"
//text box
function sayHi() {
var txtName = document.getElementById("txtName");
var divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em>";
divOutput.innerHTML = "is a very nice name.";
}
//end HI
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Inner.html</title>
<link rel="stylesheet" type="text/css" href="textBoxes.css" />
</head>
<body>
<h1>Inner HTML </h1>
<form action="">
<fieldset>
<label>Pleae type your name</label>
<input type="text" id="txtName" />
<button type="button" onclick="sayHi()">
Click Me
</button>
</fieldset>
</form>
<div id="divOutput">
Watch this space.
</div>
</body>
</html>

divOutput.innerHTML will replace whatever the divOutput have earlier, instead use +=.
function sayHi() {
var txtName = document.getElementById("txtName");
var divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML += "<em>" + name + "</em>";
divOutput.innerHTML += " is a very nice name.";
}
<form action="">
<fieldset>
<label>Pleae type your name</label>
<input type="text" id="txtName" />
<button type="button" onclick="sayHi()">
Click Me
</button>
</fieldset>
</form>
<div id="divOutput">
Watch this space.
</div>
</body>

function sayHi()
{
var txtName = document.getElementById("txtName") ;
var divOutput = document.getElementById("divOutput") ;
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em> ";
divOutput.innerHTML += "is a very nice name.";
}
or
function sayHi()
{
var txtName = document.getElementById("txtName") ;
var divOutput = document.getElementById("divOutput") ;
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em> is a very nice name.";
}

Try this, you are overwriting html. Try this
function sayHi() {
var txtName = document.getElementById("txtName");
var divOutput = document.getElementById("divOutput");
var name = txtName.value;
divOutput.innerHTML = "<em>" + name + "</em> is a very nice name.";
// divOutput.innerHTML = "is a very nice name.";
}

Take a look at this code block where I modified your attempt just a tad.
In brief, you were almost there!
Note that in order to get the value of the element, you can use .value on what was retrieved from getElementById.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Inner.html</title>
<link rel="stylesheet" type="text/css" href="textBoxes.css" />
</head>
<body>
<h1>Inner HTML</h1>
<form>
<fieldset>
<label>Please type your name</label>
<input type="text" id="txtName" />
<button type="button" onclick="sayHi()">
Click Me
</button>
</fieldset>
</form>
<div id="divOutput">
Watch this space.
</div>
<script type="text/javascript">
//text box
function sayHi() {
var txtName = document.getElementById("txtName");
console.log(txtName.value); // <== use dot value to get the value.
var divOutput = document.getElementById("divOutput");
divOutput.innerHTML =
"<em>" + txtName.value + "</em> is a very nice name.";
}
//end HI
</script>
</body>
</html>

Text-based game code not working?

I am trying to make a text-based HTML game. My .append method from jQuery is not working. When I .append() a paragraph tag to a it displays for a split second and goes away. Please help
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>game</title>
<style>
</style>
</head>
<body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/*var input;
var room;
function submitFunction() {
alert("hello")
}
*/
</script>
<script type="text/javascript">
var input;
var room;
room = "Main Enterence"
$(document).ready(function () {
$("#mainForm").submit(function() {
input = document.getElementById("textInput").value;
if (input == "east") {
if (room == "Main Enterence") {
room = "Bedroom"
enterBedroom();
}
}
if (input == "west") {
}
if (input == "north") {
}
if (input == "south") {
}
})
})
function enterBedroom() {
$( "#consoleOutput" ).append( "<p>Test</p>" );
}
</script>
<div id="consoleOutput">
<p id="welcomeText"></p>
</div>
<form onsubmit="submitFunction()" id="mainForm">
<input type="text" id="textInput">
<input type="submit" name="sumbit">
</form>
</body>
</html>
Hi,
I am trying to make a text-based HTML game. My .append method from jQuery is not working. When I .append() a paragraph tag to a it displays for a split second and goes away. Please help

This happens, because the page is refreshed - you submit form. You have to add first parametr to submit event and use preventDefault() function on it
$("#mainForm").submit(function(event) {
event.preventDefault();
});

Error:
There are two functions invoked during submit of the form...
When you need page not to refresh then don't use submit without preventing the default event...
Solution:
var input;
var room;
room = "Main Enterence";
$("#mainForm").click(function() {
input = document.getElementById("textInput").value;
if (input == "east") {
if (room == "Main Enterence") {
room = "Bedroom"
$("#consoleOutput").append( "<p>Test</p>" );
}
}
if (input == "west") {
}
if (input == "north") {
}
if (input == "south") {
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="consoleOutput">
<p id="welcomeText"></p>
</div>
<form id="mainForm">
<input type="text" id="textInput">
<input type="button" value="submit" name="submit">
</form>

It clears because you are using submit which will cause the page to reload/refresh. Change that to click
your html button:
<input type="button" name="sumbit" id="submit" value="submit">
your js:
$(document).ready(function () {
$("#submit").click(function() {
.
.
.

validation for dynamically created input without using form

i am newbie. i want to validate my dynamically created text fields.
unfortunately i couldnt use <form> as i am using it in django. i could have used jquery validator if i had used <form>. now how do i validate these fields.
my simple code looks like
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".errMsg").hide();
var data = "";
for(var i =0;i<5;i++){
data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
}
$("#mytable").html(data);
$("#clickbtn").click(function(){
for(var j=0;j<5;j++){
if($("#name"+j).val() == ""){
alert(j);
$("#name"+j).focus();
$(".errMsg").show();
}
if($("#age"+j).val() == ""){
$("#age"+j).focus();
$(".errMsg").show();
}
if(isNan($("#age"+j).val())){
$("#age"+j).focus();
$(".errMsg1").show();
}
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div>
<div class="errMsg">Invalid age</div>
</body>
</html>
i want to validate all the fields and if field is empty i want to highlight everything and display error msg under that texbox.
in this code i could focus only last textbox. how to do it for all.
Please help me.. thank you

isNan is typo error. It should be isNaN.
And please return false in every condition so the script execution will stop there and that particular element will focused.
Please check below snippet for more understanding.
$(document).ready(function(){
$(".errMsg").hide();
var data = "";
for(var i =0;i<5;i++){
data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
}
$("#mytable").html(data);
$("#clickbtn").on('click', function(){
for(var j=0;j<5;j++){
if($("#name"+j).val() == ""){
$("#name"+j).focus();
$(".errMsg").show();
return false;
}
if($("#age"+j).val() == ""){
$("#age"+j).focus();
$(".errMsg").show();
return false;
}
if(isNaN($("#age"+j).val())){
$("#age"+j).focus();
$(".errMsg1").show();
return false;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div>
<div class="errMsg">Invalid age</div>

Try this,
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".errMsg").hide();
var data = "";
for(var i =0;i<5;i++){
data = data + "Name : <input type='text' id='name"+i+"' class='required' > Age : <input type='text' id='age"+i+"' class='required' ><br>";
}
$("#mytable").html(data);
$("#clickbtn").on('click', function(){
for(var j=0;j<5;j++){
if($("#name"+j).val() == ""){
alert(j);
$("#name"+j).focus();
$(".errMsg").show();
}
if($("#age"+j).val() == ""){
$("#age"+j).focus();
$(".errMsg").show();
}
if(isNan($("#age"+j).val())){
$("#age"+j).focus();
$(".errMsg1").show();
}
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<div id="mytable"></div>
<button id="clickbtn">click</button>
<div class="errMsg">This is required</div>
<div class="errMsg">Invalid age</div>
</body>
</html>

Try below code this will may be help you out
$(document).on('click', '#clickbtn',function (){
//Write your code
})