Question

我不知道这是否可行，但我希望有一个输入字段，我将拥有一个用户无法编辑的值。但是，我不希望输入字段是“只读”，因为我仍然希望用户能够在值之后添加文本。

如果您对如何做到这一点有任何想法，请告诉我，这对我有很大的帮助。

编辑：我使用的是html表单。

Answer 1

您可以将文本放在输入字段的顶部，使其看起来就像在其中一样。像这样：

<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>

这样您的输入字段将以＆＃34; 19＆＃34;无法编辑，用户可以在此后面添加信息。

基本上你要做的是将输入字段设置为一个固定的宽度，这样你就可以知道剩下多少的负边距，以给出带有文本的跨度，以便将它准确定位在输入的开头。字段。

您可能需要根据css的其余部分来调整范围的左边距。

然后还在输入字段中添加pedding-left，以确保用户在文本之后而不是在其下面开始输入。

font：inherit应确保用户输入的文本和文本都是相同的字体。

如果您想在此输入字段的右侧放置任何内容，请在文本的边距上添加margin-right，否则其他内容也可能会开始在输入字段上运行。

Answer 2

对我来说似乎有点奇怪..为什么不只是使用文本输出，然后是输入字段？

有时用于生日（虽然，也许不再是......）

birthyear: 19[input field]

编辑：

使用一些javascript的东西，你可以实现类似你所要求的东西一个带有文本的输入字段，并在该字段中捕捉按键，同时只允许一些你希望永远存在的东西 - 但是，好吧，你需要使用js ..如果只是为了那个，我宁愿说它没有必要< / p>

编辑：

如果您只想为查看器使用技巧，您可以使用围绕文本和输入字段的背景图像/边框样式，从而使其看起来像文本和输入是相同的输入框。 / p>

Answer 3

听起来你想要占位符文字。在HTML5中，您可以在任何placeholder元素上设置input属性。这将适用于现代浏览器。

<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安装在与您的网页相同的文件夹中。]

注意：我有一种感觉，即可能会有更多的研究表明现代化并不需要现代化，尽管我对这一点可能是错的。

Answer 4

那么，也许你想要一个select菜单？

<select name="mySelectMenu">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
</select>

很抱歉，如果这不是您想要的。我正在抓稻草，因为你要求的是非常含糊的。也许您应该举例说明这些“可编辑但不可编辑”的输入之一将用于什么。

此外，您可以使用select 和 text输入。

Answer 5

主要问题是确定光标的位置。这可以通过例如完成。使用以下function：

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; 
}

现在，您可以为按键安装事件处理程序，并检查按下的键是否在textarea值的不可变部分内。如果它在那里，事件处理程序返回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）。

Answer 6

我想出了这个： ```

if (e.target.value == '' || e.target.value.length <= 3) {
   e.target.value = '+91-';
}

```

在输入字段中具有永久值，同时仍能够向其添加文本

6 个答案: