我不知道是否可能，但我想要一个输入字段，其中包含一个用户无法编辑的值。
然而，我不希望输入字段是“只读”的，因为我仍然希望用户能够在该值之后添加文本。
如果您有任何想法，请告诉我，这会对我很有帮助。
编辑：我使用HTML表单。
如果您有任何想法，请告诉我，这会对我很有帮助。
编辑：我使用HTML表单。
6个回答
3
您可以将文本放置在输入字段的顶部，使其看起来像是在其中。就像这样：
<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>
这样，你的输入字段将以“19”开头，无法编辑，用户可以在其后添加信息。
基本上，您要设置输入字段的固定宽度，以便您知道要为您的文本中的span提供多少负margin-left，以便将其定位在输入字段的开始位置。
根据其他CSS的情况，您可能需要调整span的margin-left。
然后还要向输入字段添加pedding-left，以确保用户从您的文本而不是在其下方开始输入。
font：inherit应确保您的文本和用户键入的文本使用相同的字体。
如果您想在此输入字段右侧放置任何内容，请为带有您的文本的span添加margin-right，否则其他内容也可能开始覆盖您的输入字段。
- Bart Mortelmans
1
对我来说有点奇怪...为什么不直接使用文本输出，然后再使用输入字段呢？
就像有时用于出生日期（虽然现在可能不再使用了..）
birthyear: 19[input field]
编辑：
通过一些JavaScript技巧，您可以实现您所要求的功能，例如在一个文本输入框中捕获按键，只允许某些按键出现在您想要的内容之后。但是，如果仅仅是为了这个目的，我认为使用JavaScript并不必要。
编辑：
如果您想要为观众使用一个小技巧，您可以使用背景图像/边框样式来围绕文本和输入框，从而使其看起来像是文本和输入框是同一个输入框。
- definitely undefinable
3
我考虑过这个问题，但是我正在制作一款游戏，担心那会太令人困惑了。 - jaydee
我明白了，如果你懂CSS和样式设计，你可以使用我在帖子中添加的东西。 - definitely undefinable
很遗憾，我还不会JavaScript，所以除非有其他解决方案，否则我将使用背景图片。谢谢。 - jaydee
0
我想到了这个：
```
if (e.target.value == '' || e.target.value.length <= 3) {
e.target.value = '+91-';
}
```
- ntnbst
0
看起来你想要占位符文本。在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，尽管我可能在这个特定点上是错误的。
- Jonathan Wilson
1
谢谢，但我不是在请求一个占位符。我想要向一个"不可移除的占位符"中添加文本。 - jaydee
0
也许你需要一个
<select name="mySelectMenu">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
如果这不是你想要的，我很抱歉。因为你所要求的非常模糊，我只能试图去猜测。也许你应该举一个例子，说明这些“可编辑但不可编辑”的输入框将用于什么。
此外，你可以使用 select 和 text 输入框。
- Jonathan Wilson
1
添加一个选择器，然后再加一个文本输入框是个不错的主意，我会这么做的。谢谢！ - jaydee
0
主要问题是确定光标的位置。这可以通过使用以下function来完成：
现在，您可以为按键安装事件处理程序，并检查所按下的键是否位于文本区域值的不可变部分内。如果是，则事件处理程序返回false，否则返回true。此行为可以封装到一个简单的对象中：
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;
}
现在，您可以为按键安装事件处理程序，并检查所按下的键是否位于文本区域值的不可变部分内。如果是，则事件处理程序返回false，否则返回true。此行为可以封装到一个简单的对象中：
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浏览器）。
- Jiri Kriz
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接