我有一个Web应用程序，当用户最初创建其帐户时，该应用程序会正确显示浏览器的“保存用户名和密码”对话框，该帐户当然具有新的且唯一的用户名/密码组合，而这正是我想要的。但是，只有在创建新用户帐户或编辑现有用户帐户并更改其用户名或密码时，才应发生这种情况。
[当用户更新其真实姓名和/或电子邮件地址，而不是其用户名和/或密码时，是否有某种方法可以防止浏览器显示其保存的用户名和密码对话框？
同样，当用户第一次创建其帐户或稍后更新其用户名或密码时，我希望浏览器根据用户配置其浏览器的方式，通过“保存用户名和密码”对话框来维护用户名和密码。我不想替换/复制浏览器的用户名/密码维护工具。
这是一个简化的帐户创建/编辑脚本示例，该示例收集用户帐户的用户名和密码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Username-Password Test.html</title>
</head>
<body>
<!--
When using this page to create a new user account, a php script substitutes
blank ('') values into the input element's value properties.
When using this page to edit an existing user account, the same php script
substitutes the account values, including the username, but not the password,
into those input element's value properties so that the user could see them.
Finally, in the real version of this page, there are two other javascript
functions that doubly protect that user's username and password on this page,
but which are not shown here:
- one to clear the password value that the browser substitutes into the
password input element when the page is first displayed from the browser's
username/password maintenance system
- another to prevent someone from using the browser history feature to
'jump back' to this page and seeing what the browser substituted into the
password element before the first function cleared it.
-->
页面源续...
<form action="Username_Password_Test.php" method="post"
onsubmit="return submitIt( event );">
Username:
<input type="text" id="username" name="username"
placeholder="Enter a username." value="test" /><br />
<br />
Password:
<input type="password" id="password" name="password"
placeholder="Enter a password." value="" /><br />
<button type="submit">Submit</button><br />
<br />
</form>
⫶
</body>
</html>
这是submitIt函数：
<script>
function submitIt( event ) {
var activeElement = document.activeElement;
var inputElement = document.getElementById( 'password' );
//
// Only submit the form when the user clicks or presses the enter key on the
// submit button.
//
if( ( activeElement.nodeName === 'BUTTON' ) &&
( activeElement.type === 'submit' ) ) {
// Validate the input element values. Return true when data is good.
⫶
return true; // Create/Update user account.
}
else {
findNextInput( activeElement );
alert( 'Please press the Submit button to login.' );
return false; // Don't create/Update user account.
} // End of if( ( activeElement.nodeName === 'BUTTON' ) &&
// ( activeElement.type === 'submit' ) ) ...
} // End of submitIt( event ) function.
</script>
这是findNextInput函数：
</script>
function findNextInput( element ) {
//
// The submitIt function, above, prevents default form submissions when the form
// element that caused submission is not the Submit button or the data validation
// fails, no shown, this function causes pressing the return key in an input
// element to act like the tab key, which even if not standard is required by the
// customer.
//
// Find the next input element in the form and set the focus on it.
// Expand search to other tag-elements, when necessary.
//
// First, get a list of the form's input elements.
var formInputs = element.form.elements;
var tabIndex = element.tabIndex;
// Locate the element in the form's list of elements ...
for( var i = 0, l = formInputs.length; i < l; ++i ) {
if( element === formInputs[ i ] ) {
//
// Element found
//
// Find the next enabled/visible element in the form elements with a
// tabIndex equal to or greater than the active element's
// tabIndex and set the focus on it ...
//
//
// Set j to i + 1 if i + 1 is within the form elements bounds
// else, set j to the first form element's index.
//
var j = ( ( ( j = ( i + 1 ) ) < l ) ? j : 0 );
for( ; j !== i; ( ( j === l ) ? 0 : ++j ) ) {
var nextElement = formInputs[ j ];
if( ( nextElement.style.display !== 'none' ) &&
( nextElement.style.visibility !== 'hidden' ) &&
( nextElement.tabIndex >= tabIndex ) ) {
//
// This isn't actually correct because it should take the 'next' element with the lowest
// tabIndex of the elements that pass the above if-then statement, which might appear
// before the element parameter, but for this example, since tab order isn't used, this
// solution is more than sufficient.
//
nextElement.focus();
break;
} // End of if( ( nextElement.style.display !== 'none' ) &&
// ( nextElement.style.visibility !== 'hidden' ) &&
// ( nextElement.tabIndex >= tabIndex ) ) ...
} // End of for( var j = ( i + 1 ); j !== i; ( ( j === l ) ? 0 : ++j ) ) ...
break;
} // End of if( element === formInputs[ i ] ) ...
} // End of for( var i = 0, l = formInputs.length; i < l; ++i ) ...
} // End of findNextInput( ) function.
</script>
这里是一个简单的服务器端php脚本，显示了发布的用户名和密码值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Username-Password Test.php</title>
</head>
<body>
$_POST Keys:
<?php
echo implode( ', ', array_keys( $_POST ) );
?>
<br />
Username:
<span>
<?php
echo $_POST[ 'username' ];
?>
</span><br />
Password:
<?php
if( array_key_exists( 'password', $_POST ) ) {
echo $_POST[ 'password' ];
}
else {
echo 'missing!';
}
?>
</body>
</html>
谢谢
为了回应您的评论（并且没有太多相关的代码来查看您的真正问题是什么，这将是一种为用户提供一种方式来切换其密码，以便在使用普通javascript的命令中显示该密码的一种方式）>
const myInput = document.getElementById("password") document.getElementById("passwordButton").addEventListener("click", ()=>{ myInput.type === 'text' ? myInput.type = 'password' : myInput.type ='text' })<input id='password' type='password' /> <button id='passwordButton' type='button'> Show/Hide </button>