如何在HTML文本输入框中放置默认文本,使用户无法删除(固定文本位于输入框开头)。
我想要的第二件事是光标定位在这个固定文本之后。
如何在HTML文本输入框中放置默认文本,使用户无法删除(固定文本位于输入框开头)。
我想要的第二件事是光标定位在这个固定文本之后。
试试这个。它可能对你有帮助。它使用绝对定位将文本放在文本输入框上方。
.input-box {
position: relative;
}
input {
display: block;
border: 1px solid #d7d6d6;
background: #fff;
padding: 10px 10px 10px 20px;
width: 195px;
}
.unit {
position: absolute;
display: block;
left: 5px;
top: 10px;
z-index: 9;
}
<div class="input-box">
<input value="" autofocus="autofocus"/>
<span class="unit">£</span>
</div>
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" />
我知道这个问题已经得到了答复,但是这里有另一种方法来解决它。
我用以下代码进行测试..
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>
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" />
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>
只需使用 placeholder="姓名" 例如: