Javascript 预填输入文本框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7550610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 02:41:20  来源:igfitidea点击:

Pre-fill input text box

javascripthtml

提问by acctman

Does anyone know of a good small piece of code that will prefill my user and pass input box with the text username and password. I've seen so jscript that will do it but i'm looking for something that is a few lines a code.

有谁知道一小段代码可以预填充我的用户并使用文本用户名和密码传递输入框。我见过这样的 jscript 可以做到,但我正在寻找几行代码的东西。

similar to how the search text is in the search box up top on the right

类似于搜索文本在右上角的搜索框中的方式

回答by Phil McCullick

For browsers that support HTML5, adding placeholder="search" will add the prefill text automatically.

对于支持 HTML5 的浏览器,添加 placeholder="search" 将自动添加预填充文本。

The search text box at the top of the page has:

页面顶部的搜索文本框有:

<input type="text" placeholder="search" >

You can use an HTML5 shim to make this backwards compatible. Example: http://kamikazemusic.com/web-development/revisiting-html5-placeholder-fixes/

您可以使用 HTML5 垫片使其向后兼容。示例:http: //kamikazemusic.com/web-development/revisiting-html5-placeholder-fixes/

回答by Saket

You can use the following:

您可以使用以下内容:

<input type="text" style="color:#ccc;" value="username" onfocus="this.value = this.value=='username' ? '' : this.value; this.style.color='#000';" onfocusout="this.value = this.value == '' ? this.value = 'username' : this.value; this.value=='username' ? this.style.color='#ccc' : this.style.color='#000'"/>

<input type="text" style="color:#ccc;" value="password" onfocus="this.value = this.value=='password' ? '' : this.value; this.style.color='#000';" onfocusout="this.value = this.value == '' ? this.value = 'password' : this.value; this.value=='password' ? this.style.color='#ccc' : this.style.color='#000'"/>