Javascript html中的搜索框到URL

Question

好的，我有这个代码

<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：”而不是“登录”它说“开始！”

Answer 1

在重新阅读您的问题并注意到标题提示您实际上是在尝试将此代码用作某种可搜索导航而不是像原始代码那样的“密码”系统后，我更新了我的答案。我使用<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> block 中，并为h1 标签提供了应用其样式的class。我删除了表单，因为您实际上并没有提交表单。使用<button type="button"> 代替提交输入将确保按下按钮本身不会尝试提交表单，从而导致导航。我使用getElementById 来获取对vite 和go 元素和querySelectorAll 的引用，它根据CSS selector 字符串查找元素以获取option 元素。然后将选项元素列表细化为它们的值列表，以便我们可以搜索该列表以确认页面存在，然后再尝试导航到该页面。

其他说明： 您不需要（也不应该）在脚本标签上使用language 或type 属性，只需使用裸<script> 标签。语言已被弃用很长时间，并且从未标准化。由于一些不同的因素，Type 也从未真正做过任何事情。两者都不需要，每个曾经支持 script 标签的浏览器都默认使用 JavaScript。

进一步阅读：

• Introduction to CSS
• Eloquent JavaScript 一本很棒的（免费的）关于 JS 的书
• Convert NodeList to Array
• Array.prototype.indexOf
• 我写了Spotting bad JavaScript tutorials来帮助正在学习JS的人；那里有很多糟糕和/或过时的教程。许多初学者在不知不觉中使用了这些不良信息并养成了不良习惯。知道要注意什么可以帮助您避免可能导致您养成这些坏习惯的事情。

---

为了后代，我将把这个留给任何正在考虑使用与问题中的代码类似的代码作为“密码”系统的人。使用basic authentication 之类的东西比使用秘密文件名要好得多。最终有人会找到这些页面。我让搜索引擎以某种方式找到从未链接到任何地方的文件！不要指望一个晦涩的文件名来保密。