Html 将文本放入文本框中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6619299/
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
Put text in textbox
提问by user780483
Is there a way to put text in a textbox but also allow the user to type something. I would like to write "username:" inside the box and allow the user to type after the colon. I can do this the hard way by creating a div right next to a textbox and make it look like they are one container, but I was wondering if there was an easier way? Thanks
有没有办法将文本放入文本框中，但也允许用户输入内容。我想在框中写入“用户名：”并允许用户在冒号后键入。我可以通过在文本框旁边创建一个 div 并使其看起来像一个容器来实现这一点，但我想知道是否有更简单的方法？谢谢
EDIT: I don't want to text to disappear. I just want to user to be able to continue typing
编辑：我不想让文字消失。我只是想让用户能够继续打字
EDIT 2: the reason you cant put a value in the textbox is because its a form. when the user types a username next to the value it will submit together
编辑 2：你不能在文本框中输入值的原因是因为它是一个表单。当用户在值旁边键入用户名时，它将一起提交
回答by Brad Christie
HTML5 has a placeholderattribute you can now use:
HTML5 有一个你现在可以使用的占位符属性：
<input type="text" placeholder="username" />
People have also created javascript functionsthat mimic this functionality.
人们还创建了模仿此功能的javascript函数。
There's also a jQuery placeholderplugin which does the same, if you'd like to go that route.
如果您想走那条路，还有一个jQuery 占位符插件可以做同样的事情。
回答by Blair McMillan
What's wrong with using standard HTML? You don't say that you need it to disappear...
使用标准 HTML 有什么问题？你不是说你需要它消失......
<input type="text" value="username: " />
If you need it to disappear, use a placeholder attribute and a jQuery plugin as a fallback (for the browsers that don't support it.
如果您需要它消失，请使用占位符属性和 jQuery 插件作为后备（对于不支持它的浏览器。
回答by Jason Gennaro
You could do something like this:
你可以这样做：
<div>
<label>Username:</label>
<input type="text" />
</div>
CSS
CSS
div{border:1px solid gray;}
label{font-family:arial; font-size:.8em;}
input{border:none;}
input:focus{outline:none;}
Basically, created a containing divand placed a labeland inputin that div. labelis the words that stay in the field. inputhas the borderremoved.
基本上，创建了一个含有div并置于label与input在该div。 label是留在场上的话。 input已border删除。
http://jsfiddle.net/jasongennaro/rZmFx/
http://jsfiddle.net/jasongennaro/rZmFx/
Fyi... you may need to increase the size of the input, depending on how many characters you want to accept.
仅供参考...您可能需要增加 的大小input，具体取决于您要接受的字符数。
回答by Karin Garcia
<input type="text" placeholder="Category"/>
Maybe that can help you. If you want the textbox for only read you can put the property readonly = "".
也许这可以帮助你。如果您只希望文本框只读，您可以放置属性readonly = ""。
回答by Kyle
You could call this javascript function once the page is loaded:
加载页面后，您可以调用此 javascript 函数：
function add(text){
var TheTextBox = document.getElementById("Mytextbox");
TheTextBox.value = TheTextBox.value + text;
}
回答by Thomas Dignan
If you are using HTML5, you can use the placeholder attribute.
如果您使用的是 HTML5，则可以使用 placeholder 属性。
