我不知道是否可能,但我想要一个输入字段,其中包含一个用户无法编辑的值。
然而,我不希望输入字段是“只读”的,因为我仍然希望用户能够在该值之后添加文本。
如果您有任何想法,请告诉我,这会对我很有帮助。
编辑:我使用HTML表单。
如果您有任何想法,请告诉我,这会对我很有帮助。
编辑:我使用HTML表单。
您可以将文本放置在输入字段的顶部,使其看起来像是在其中。就像这样:
<input type="text" name="year" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">19</span>
对我来说有点奇怪...为什么不直接使用文本输出,然后再使用输入字段呢?
就像有时用于出生日期(虽然现在可能不再使用了..)
birthyear: 19[input field]
编辑:
通过一些JavaScript技巧,您可以实现您所要求的功能,例如在一个文本输入框中捕获按键,只允许某些按键出现在您想要的内容之后。但是,如果仅仅是为了这个目的,我认为使用JavaScript并不必要。
编辑:
如果您想要为观众使用一个小技巧,您可以使用背景图像/边框样式来围绕文本和输入框,从而使其看起来像是文本和输入框是同一个输入框。
if (e.target.value == '' || e.target.value.length <= 3) {
e.target.value = '+91-';
}
```
看起来你想要占位符文本。在HTML5中,你可以在任何元素上设置属性。这将在现代浏览器中工作。
<input type="email" placeholder="jappleseed@appletree.com" name="reg_email" />
现在,对于旧版浏览器,这种方法行不通。您需要使用JavaScript替代方案来提供相同的UI价值。
这适用于所有浏览器:
<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">
但这并不推荐,因为有更好的方法(实际上,它是前两种方法的结合):对于新浏览器使用HTML5标记;对于旧浏览器使用jQuery和modernizr。这样,您只需要一个代码集即可支持所有用户情况。
直接摘自webdesignerwall.com:
<script src="jquery.js"></script>
<script src="modernizr.js"></script>
<script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
</script>
[您需要在与网页同一文件夹中安装jquery.js和modernizr.js。]
注意:我有一种感觉,更多的研究可能会揭示出根本不需要使用modernizr,尽管我可能在这个特定点上是错误的。
<select name="mySelectMenu">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
如果这不是你想要的,我很抱歉。因为你所要求的非常模糊,我只能试图去猜测。也许你应该举一个例子,说明这些“可编辑但不可编辑”的输入框将用于什么。
此外,你可以使用 select
和 text
输入框。
function getCaret(el) {
var pos = -1;
if (el.selectionStart) {
pos = el.selectionStart;
}
else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r != null) {
var re = el.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
pos = rc.text.length;
}
}
return pos;
}
function Input(id, immutableText) {
this.el = document.getElementById(id);
this.el.value = immutableText;
this.immutableText = immutableText;
this.el.onkeypress = keyPress(this);
}
function keyPress(el) {
return function() {
var self = el;
return getCaret(self.el) >= self.immutableText.length;
}
}
Input.prototype.getUserText = function() {
return this.el.value.substring(this.immutableText.length);
};
var input = new Input("ta", "Enter your name: ");
var userText = input.getUserText();
你可以在 jsFiddle 上查看(使用Firefox或Chrome浏览器)。