This code below works in all web browsers except IE
:
<input type="text" name="passwordLogin" value="Password" onfocus="if(this.value=='Password'){this.value=''; this.type='password'};" onblur="if(this.value==''){this.value='Password'; this.type='text'};" size="25" />
How can I fix it for IE?
I did some changes, but it still has an error.
I want it to work like this like here:
<input type="text" name="usernameLogin" value="Email" onfocus="if(this.value=='Email'){this.value=''};" onblur="if(this.value==''){this.value='Email'};" size="25" />
if I don't enter anything it will put the value back.
So I tried this:
<td colspan="2" id="passwordLoginTd">
<input id="passwordLoginInput1" type="text" name="passwordLogin" value="Password" onfocus="passwordFocus()" size="25" />
<input id="passwordLoginInput2" style="display: none;" type="password" name="passwordLogin" value="" onblur="passwordBlur()" size="25" />
</td>
<script type="text/javascript">
//<![CDATA[
passwordElement1 = document.getElementById('passwordLoginInput1');
passwordElement2 = document.getElementById('passwordLoginInput2');
function passwordFocus() {
passwordElement1.style.display = "none";
passwordElement2.style.display = "inline";
passwordElement2.focus();
}
function passwordBlur() {
if(passwordElement2.value=='') {
passwordElement2.style.display = "none";
passwordElement1.style.display = "inline";
passwordElement1.focus();
}
}
//]]>
</script>
as you can see the blur does not work.
Finally I got it, I needed to remove:
passwordElement1.focus();
To change the type of input it is (button to text, for example), use: myButton. type = "text"; //changes the input type from 'button' to 'text'. Another way to change or create an attribute is to use a method like element.
In JavaScript, we use the prompt() function to ask the user for input. As a parameter, we input the text we want to display to the user. Once the user presses “ok,” the input value is returned. We typically store user input in a variable so that we can use the information in our program.
How to Change Font Type in HTML. To change font type purely with HTML, use the CSS font-family property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.
you can do this. However, doing a replace on the outerhtml essentially re-declares the element, so any attribute not explicitly defined in the tag declaration will be forgotten. That is why the text value is saved to a variable first. Unlike jQuery's attr and prop, this works in all versions of IE. I used a real IE10, and I used IETester for 5.5 thru 9.
Here is a fiddle, code below:
HTML
<input id="myinput" type="password">
<input value="transform" id="transformButton" type="button">
JS
//attach a click handler to the button to make it transform
//when clicked, via our transform() function below
document.getElementById('transformButton').addEventListener("click", transform);
//flag of whether or not it is a password field or text field
var isPassword = true;
//this function will toggle the input between being a password or a text input
function transform() {
//copy the element itself, its html source, and value text to a variable
var myInput = document.getElementById("myinput");
var oldHtml = myInput.outerHTML;
var text = myInput.value;
if (isPassword)
{
//replace "password" with "text" in the html if it is a password field
var newHtml = oldHtml.replace(/password/g, "text");
}
else
{
//replace "text" with "password" if it is a text field
newHtml = oldHtml.replace(/text/g, "password");
}
//update the html
myInput.outerHTML = newHtml;
//restore the text value
myInput = document.getElementById("myinput");
myInput.value = text;
//toggle the isPassword flag
isPassword = !isPassword;
}
You cannot dynamically change a the type of an input element in Internet Explorer.
One possible workaround would be to:
You may want to check the following article for a JavaScript implantation of the above:
Another option would be to statically create the two elements, but having only one visible at a time. The visibility and the focus would depend on the value of the elements. In this case, you may want to use something like this:
<script type="text/javascript">
function checkType() {
var thisElement = document.getElementById('field_text');
var otherElement = document.getElementById('field_password');
if (thisElement.value === 'Password') {
otherElement.style.display = 'inline';
thisElement.style.display = 'none';
otherElement.focus();
}
}
</script>
<input type="text" value="Password" id="field_text" onfocus="checkType();" />
<input type="password" value="" style="display: none;" id="field_password" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With