Hi there,
I have a peculiar problem with an input field which is of type password and which uses the Safari specific attribute called placeholder.
The issue I am having is the password input field is displaying "..." rather than "PIN". It's as if the text "PIN" is the actual password entered in.
This issue only occurs when I am hiding and then showing the form on the page. If the form is not hidden, the field is ok.
Would anyone know how I can get around this peculiar problem?
I have the following html page which has two forms. Each form is within a specific div.
<div id="content">
<div align="center" class="paired buttons">
<input type="button" name="view_type" value="Form A" class="left active" onclick="switchTo('form_a')" />
<input type="button" name="view_type" value="Form B" id="fflyer_btn" class="right" onclick="switchTo('form_b')" />
</div>
<div id="form_a">
<form styleClass="layout" action="/dyn/checkmytripWktMobile" method="post">
<input type="text" id="bookingRef" name="bookingRef" class="firstinput" size="6" maxlength="6" placeholder="Booking Ref" title="Booking Reference" />
<input type="text" id="surname" name="surname" class="nextinput" size="18" maxlength="37" placeholder="Last Name" title="Last Name" />
<div class="buttonlayout">
<html-el:submit property="login" value="Find Bookings" styleClass="subbutton" />
</div>
</form>
</div>
<div id="form_b" style="visibility:hidden;">
<form id="login" class="layout" name="FFLoginForm" method="post" action="blah">
<div>
<input type="text" id="login_ffNumber" name="login_ffNumber" class="firstinput" size="18" maxlength="10" placeholder="Number" title="Number" />
<input type="text" id="login_surname" name="login_surname" class="nextinput" size="18" maxlength="37" placeholder="Last Name" title="Last Name" />
<input type="password" id="login_pin" name="login_pin" class="nextinput" size="18" maxlength="4" placeholder="PIN" title="PIN" />
</div>
<div class="buttonlayout">
<html-el:submit property="login" value="Login" styleClass="subbutton" />
</div>
</form>
</div>
</div>
When clicking on the paired button, I call the "switchTo" javascript function to hide one div and then show the other div:
//This is the public method for the paired button. This will toggle the state of the buttons
function switchTo(divId) {
//Get the styling for the divId
var styleSheet = getStyleObject(divId);
if (styleSheet) {
//First, hide everything
hideAll();
//Change the visibility for the divId
changeObjectVisibility(divId, "visible");
//We now need to change the state of the button
changeObjectActivity(divId, "view_type");
}
else {
alert ("Sorry, this only works in browsers that supports Dynamic HTML.")
}
}
//get the styling for the specific objectId
function getStyleObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId]) {
return document.latyers[objectId];
}
else {
return false;
}
}
//Toggles whether to make the element visible or not
function changeObjectVisibility(objectId, newVisibility) {
//First get the object's stylesheet'
var styleObject = getStyleObject(objectId);
if (styleObject) {
styleObject.visibility = newVisibility;
}
else {
return false;
}
}
//Toggles the state of the paired button
function changeObjectActivity(objectId, elementName) {
//First get the button element
var buttonElementObject = document.getElementsByName(elementName);
if (buttonElementObject) {
//Check to see which div was made visible
if (objectId == "qf_fflyer") {
buttonElementObject[0].className = "left";
buttonElementObject[1].className = "right active";
}
else {
buttonElementObject[0].className = "left active";
buttonElementObject[1].className = "right";
}
return true;
}
else {
return false;
}
}
//Initially hide all the div's
function hideAll() {
changeObjectVisibility("qf_fflyer", "hidden");
changeObjectVisibility("qf_bookingref", "hidden");
}
//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}
function replaceChecks() {
//get all the input fields on the page
inputs = document.getElementsByTagName('input');
//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {
//check if the input is a checkbox
if(inputs.getAttribute('type') == 'checkbox') {
//create a new image
var img = document.createElement('img');
//check if the checkbox is checked
if(inputs.checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}
//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs.parentNode.insertBefore(img, inputs);
//hide the checkbox
inputs.style.display='none';
}
}
}
//change the checkbox status and the replacement image
function checkChange(i) {
if(inputs.checked) {
inputs.checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs.checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}
//This is for error messages. Have to put error messages into a hidden field and then perform an alert
function alertUser(objId) {
var msgField = document.getElementById(objId);
alert(msgField.value);
}
Thank you for your help in advance.
I have a peculiar problem with an input field which is of type password and which uses the Safari specific attribute called placeholder.
The issue I am having is the password input field is displaying "..." rather than "PIN". It's as if the text "PIN" is the actual password entered in.
This issue only occurs when I am hiding and then showing the form on the page. If the form is not hidden, the field is ok.
Would anyone know how I can get around this peculiar problem?
I have the following html page which has two forms. Each form is within a specific div.
<div id="content">
<div align="center" class="paired buttons">
<input type="button" name="view_type" value="Form A" class="left active" onclick="switchTo('form_a')" />
<input type="button" name="view_type" value="Form B" id="fflyer_btn" class="right" onclick="switchTo('form_b')" />
</div>
<div id="form_a">
<form styleClass="layout" action="/dyn/checkmytripWktMobile" method="post">
<input type="text" id="bookingRef" name="bookingRef" class="firstinput" size="6" maxlength="6" placeholder="Booking Ref" title="Booking Reference" />
<input type="text" id="surname" name="surname" class="nextinput" size="18" maxlength="37" placeholder="Last Name" title="Last Name" />
<div class="buttonlayout">
<html-el:submit property="login" value="Find Bookings" styleClass="subbutton" />
</div>
</form>
</div>
<div id="form_b" style="visibility:hidden;">
<form id="login" class="layout" name="FFLoginForm" method="post" action="blah">
<div>
<input type="text" id="login_ffNumber" name="login_ffNumber" class="firstinput" size="18" maxlength="10" placeholder="Number" title="Number" />
<input type="text" id="login_surname" name="login_surname" class="nextinput" size="18" maxlength="37" placeholder="Last Name" title="Last Name" />
<input type="password" id="login_pin" name="login_pin" class="nextinput" size="18" maxlength="4" placeholder="PIN" title="PIN" />
</div>
<div class="buttonlayout">
<html-el:submit property="login" value="Login" styleClass="subbutton" />
</div>
</form>
</div>
</div>
When clicking on the paired button, I call the "switchTo" javascript function to hide one div and then show the other div:
//This is the public method for the paired button. This will toggle the state of the buttons
function switchTo(divId) {
//Get the styling for the divId
var styleSheet = getStyleObject(divId);
if (styleSheet) {
//First, hide everything
hideAll();
//Change the visibility for the divId
changeObjectVisibility(divId, "visible");
//We now need to change the state of the button
changeObjectActivity(divId, "view_type");
}
else {
alert ("Sorry, this only works in browsers that supports Dynamic HTML.")
}
}
//get the styling for the specific objectId
function getStyleObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId]) {
return document.latyers[objectId];
}
else {
return false;
}
}
//Toggles whether to make the element visible or not
function changeObjectVisibility(objectId, newVisibility) {
//First get the object's stylesheet'
var styleObject = getStyleObject(objectId);
if (styleObject) {
styleObject.visibility = newVisibility;
}
else {
return false;
}
}
//Toggles the state of the paired button
function changeObjectActivity(objectId, elementName) {
//First get the button element
var buttonElementObject = document.getElementsByName(elementName);
if (buttonElementObject) {
//Check to see which div was made visible
if (objectId == "qf_fflyer") {
buttonElementObject[0].className = "left";
buttonElementObject[1].className = "right active";
}
else {
buttonElementObject[0].className = "left active";
buttonElementObject[1].className = "right";
}
return true;
}
else {
return false;
}
}
//Initially hide all the div's
function hideAll() {
changeObjectVisibility("qf_fflyer", "hidden");
changeObjectVisibility("qf_bookingref", "hidden");
}
//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}
function replaceChecks() {
//get all the input fields on the page
inputs = document.getElementsByTagName('input');
//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {
//check if the input is a checkbox
if(inputs.getAttribute('type') == 'checkbox') {
//create a new image
var img = document.createElement('img');
//check if the checkbox is checked
if(inputs.checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}
//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs.parentNode.insertBefore(img, inputs);
//hide the checkbox
inputs.style.display='none';
}
}
}
//change the checkbox status and the replacement image
function checkChange(i) {
if(inputs.checked) {
inputs.checked = '';
document.getElementById('checkImage'+i).src=imgFalse;
} else {
inputs.checked = 'checked';
document.getElementById('checkImage'+i).src=imgTrue;
}
}
//This is for error messages. Have to put error messages into a hidden field and then perform an alert
function alertUser(objId) {
var msgField = document.getElementById(objId);
alert(msgField.value);
}
Thank you for your help in advance.