好的，所以我有这个代码
<center>
<font color="blue">
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Admin Login
</h1>
<script type="text/javascript">
function CheckPassword() {
var username=document.login.username.value;
var password=document.login.password.value;
location.href = username + password+'.htm';
}
</script>
<form method="post" action="ingen_javascript.htm"
onsubmit="CheckPassword();return false;" name="login">
<pre>
Username: <input type="text" name="username">
Password: <input type="password" name="password">
</pre>
<input type="submit" value="login"
onclick="CheckPassword();return false;">
</form>
<script language="javascript" text="javascript">
Mousetrap.bind("ctrl+u", function() {
alert("Hello, World!");
});
</script>
<script type="text/javascript">
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
alert("No"); //here you draw your own menu
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
alert("NO");
window.event.returnValue = false;
});
}
</script>您可以看到，如果您键入任何内容并单击 Enter，它将在 URL 中出现。但是我如何摆脱密码并只使用用户名，但不是"用户名："，而是说"vite："，而不是"登录"，而是说"开始！
在重新阅读您的问题并注意到标题提示您实际上正在尝试将此代码用作某种可搜索的导航而不是像原始代码那样的"密码"系统后，我已经更新了我的答案。 我使用<datalist>元素来提供建议的页面名称列表，因为您可能有一个有限的页面列表，您希望以这种方式访问，而不是允许任意 url。然后，JavaScript 会根据该列表进行检查，以便它只导航到实际存在的页面。
// get go and vite by thier id
var go = document.getElementById('go'),
vite = document.getElementById('vite')
// get all of the option elements inside of the pages datalist
pages = document.querySelectorAll('#pages > option');
// convert the node list that querySelectorAll returned into a real array
pages = Array.prototype.slice.call(pages);
// convert pages from an array of element into an array of strings
// containing the value of each of the elements
pages = pages.map(function (item) {
return item.value;
});
// goToSelectedPage should not be capitalized, in JS it is convention to
// only capitalize constructor functions
function goToSelectedPage () {
var page = vite.value,
url = page + '.htm';
// if the value of vite is in the list of pages
if (-1 !== pages.indexOf(page)) {
console.log('Navigating to ' + url);
// disabling the page change for this example
//location.href = url;
}
}
// attach the goToSelectedPage function to the click event on go
// All vaguely modern browsers support addEventListener,
// no need to check for it and fall back to attachEvent
go.addEventListener('click', goToSelectedPage, false);
// add an event listener to vite that will call goToSelectedPage
// if they press the enter key instead of clicking the Go! button
vite.addEventListener('keyup', function (evt) {
if (evt.key === 'Enter') {
goToSelectedPage();
}
});body {
color: blue; /* instead of wrapping the page in a font tag,
add the color to styling for the body */
}
.login-header {
font-family: Comic Sans Ms;
text-align: center;
font-size: 20pt;
color: #0F0;
}<h1 class="login-header">Admin Login</h1>
<label for="vite">Vite:</label> <input type="text" id="vite" list="pages"> <button id="go" type="button">Go!</button>
<!-- datalist is invisible but will be used by the vite element to provide an
auto complete suggestion list -->
<datalist id="pages">
<option value="foo">
<option value="bar">
<option value="baz">
</datalist>我没有使用内联样式和字体标签，而是将样式移动到<style>块中，并为h1标签提供了一个应用其样式的类。我删除了表单，因为您实际上并没有提交表单。使用<button type="button">而不是提交输入将确保单独按下按钮不会尝试提交表单，从而导致导航。我使用getElementById来获取对vite和go元素的引用，并querySelectorAll，它根据CSS选择器字符串查找元素以抓取option元素。然后将选项元素列表细化为其值列表，以便我们可以搜索该列表以确认页面存在，然后再尝试导航到该页面。
其他说明：您不需要(也不应该)在脚本标签上使用language或type属性，只需使用裸<script>标签即可。语言已被弃用了很长时间，并且从未标准化。类型也从未真正做过任何事情，因为有几个不同的因素。两者都不需要，每个曾经支持脚本标签的浏览器都默认为 JavaScript。
延伸阅读：
- CSS简介
- Eloquent JavaScript 一本关于JS的伟大(和免费)书
- 将节点列表转换为数组
Array.prototype.indexOf- 我写了Spotting糟糕的JavaScript教程来帮助那些正在学习JS的人;那里有很多糟糕和/或过时的教程。许多初学者在不知不觉中使用这些不良信息并养成坏习惯。知道要注意什么可以帮助你避免可能导致你养成这些坏习惯的事情。
对于后代，我将把这个留给任何正在考虑使用类似于问题中的代码作为"密码"系统的代码的人。使用基本身份验证之类的东西比使用秘密文件名要好得多。最终会有人找到这些页面。我让搜索引擎以某种方式找到从未链接到任何地方的文件！不要指望一个晦涩难懂的文件名来保持它的私密性。