Html 在输入文本上放置固定文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16232774/
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
Html Put a fixed text on an input text
提问by Brahim
How can i put a default text in an input html element which user can't delete(ficed text on start of the input ) . The second thing what i want that the cursor will be indexedafter this fixed text.
如何将默认文本放入用户无法删除的输入 html 元素中（输入开始时的文本）。我想要的第二件事是光标将在此固定文本之后编入索引。
采纳答案by Ben Besuijen
If you want to fix this with only an input element you can use an inline svg background.
如果您只想使用输入元素解决此问题，您可以使用内联 svg 背景。
http://codepen.io/anon/pen/pJoBya
http://codepen.io/anon/pen/pJoBya
To make this work in Internet Explorer you need encodeURIComponent the SVG image http://pressbin.com/tools/urlencode_urldecode/
要在 Internet Explorer 中完成这项工作，您需要 encodeURIComponent SVG 图像 http://pressbin.com/tools/urlencode_urldecode/
input {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">Age:</text></svg>') no-repeat;
border: 1px solid #555;
box-sizing: border-box;
font: 16px "Arial";
height: 30px;
padding-left: 50px;
width: 300px;
}<input type="text" />回答by Manish Sharma
try this one might be helpful for you.
试试这个可能对你有帮助。
<div class="input-box">
<input value="" autofocus="autofocus"/>
<span class="unit">￡</span>
</div>
回答by Helmyano
I know this question is already answered, but here is another way to do it.
我知道这个问题已经回答了，但这是另一种方法。
I tested this code with..
我用..
Firefox 22
Google Chrome 28
Internet Explorer 10
Safari 5
Opera 15
#text_container {
padding: 1px;
/*To make sure that the input and the label will not overlap the border, If you remove this line it will not display correctly on Opera 15.0*/
border: 1px solid activeborder;
/*Create our fake border :D*/
}
#text_container>label {
color: activeborder;
background-color: white;
-webkit-touch-callout: none;
/*Make the label text unselectable*/
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#text_container>input {
border: none;
/*We have our fake border already :D*/
}<span id="text_container">
<!-- Don't break the following line to avoid any gaps between the label text and the input text -->
<label>http://www.</label><input type="text" />
</span>回答by Eduardo de Souza
var requiredText = 'https://';
$('#site').on('input', function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="site" />回答by Prateek Gupta
You can also do it by using bootstrap :
您也可以使用 bootstrap 来做到这一点：
div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
You can check here.(check the usernamefield)
你可以在这里检查。（检查用户名字段）
回答by matpol
Absolutely position the text over the beginning of the field then add left padding to the field until the cursor lines up to the right position. See example here: http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/
将文本绝对定位在字段的开头，然后向字段添加左填充，直到光标对齐到正确的位置。请参阅此处的示例：http: //www.accessfinancialservices.co.uk/calculators/mortgage-calculator/
回答by name
just use placeholder="Name" for example:
只需使用 placeholder="Name" 例如：
