如何仅将文本框中的某些文本设为只读，同时允许编辑其余文本答案

【问题标题】：How to make only some text in a text-box read-only while allowing the rest to be edited如何仅将文本框中的某些文本设为只读，同时允许编辑其余文本
【发布时间】：2019-10-11 00:02:52
【问题描述】：

我正在尝试使用 Javascript 制作一个文本框，该文本框在文本框的开头包含一些只读文本，然后允许在只读文本之后进行编辑。我怎样才能在 Javascript/jquery 中做到这一点？

【问题讨论】：

这样做的目的是什么？为什么不能将文本移出框？
这在单个文本框中是不可能的。
不是一个很好的解决方案，但作为一种快速解决方法，您可以在文本框上设置background-image 和padding，并将您希望“只读”的文本作为图像。很好的问题，期待看看这是否有可能以另一种方式......
使用多个字段/元素来显示文本

标签： javascript jquery

【解决方案1】：

这是一个尝试：

var readOnlyLength = $('#field').val().length;

$('#output').text(readOnlyLength);

$('#field').on('keypress, keydown', function(event) {
  var $field = $(this);
  $('#output').text(event.which + '-' + this.selectionStart);
  if ((event.which != 37 && (event.which != 39)) &&
    ((this.selectionStart < readOnlyLength) ||
      ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" />
<div id="output">
</div>

这会禁用只读部分的左右箭头以外的键。它还会在只读部分结束时禁用退格键。

根据我的阅读，这不适用于 IE

这里是纯 JavaScript（没有 JQuery）：

function makeInitialTextReadOnly(input) {
  var readOnlyLength = input.value.length;
  field.addEventListener('keydown', function(event) {
    var which = event.which;
    if (((which == 8) && (input.selectionStart <= readOnlyLength)) ||
      ((which == 46) && (input.selectionStart < readOnlyLength))) {
      event.preventDefault();
    }
  });
  field.addEventListener('keypress', function(event) {
    var which = event.which;
    if ((event.which != 0) && (input.selectionStart < readOnlyLength)) {
      event.preventDefault();
    }
  });
}

makeInitialTextReadOnly(document.getElementById('field'));

&lt;input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" /&gt;

【讨论】：

@codeiz - 谢谢，但我对鼓励 OP 感到有点内疚。 :)
这正是我需要的！谢谢。 :)
在这种情况下，您可能还希望允许 Home 和 End 键，因此当 which 为 36 或 35 时不要返回 false。如果您注意到其他应该被允许的键，您可以在 jsfiddle 中尝试它们并查看出现在输入下方的第一个数字。
再次感谢！你帮了大忙。我是stackoverflow的新手，所以我没有任何代表，否则我会投票赞成。
有没有人有针对这个问题的纯 JavaScript 解决方案？

【解决方案2】：

这里有一些想法

用jquery大致解决

html

<input type="text" id='myinput' value ="my text">

jquery

var orginal_text = $('#myinput').val();
var regular_expression = '/^' + orginal_text +'/' ;
$('#myinput').keyup(function(){
    var current_text = $('#myinput').val();
    if(current_text.match('^' + orginal_text +'') == null){
        $('#myinput').val(orginal_text + ' ' +current_text )
    }

})

http://jsfiddle.net/e5EDY/

使用 css

html

 <input type="text" id='my_sticky_text' value ="my text" readonly='readonly'>
<input type="text" id='myinput' value ="my text">

css

#my_sticky_text{
    position:absolute;
    left : 0px;
}

#myinput{
    position:absolute;
    left : 50px;
    border-left:none;
}

http://jsfiddle.net/kaf4j/

组合检索值

html

 <input type="text" id='my_sticky_text' value ="my text" readonly='readonly'>
<input type="text" id='myinput' value ="my text">
    <br>
    <hr>
    <button id='getval'>get value</button>

css

#my_sticky_text{
    position:absolute;
    left : 0px;
}

#myinput{
    position:absolute;
    left : 50px;
    border-left:none;
}

jquery

$('#getval').click(function(){
   var sticky_text = $('#my_sticky_text').val();
    var user_text = $('#myinput').val();
alert (sticky_text + ' ' + user_text)

})

http://jsfiddle.net/YsNMQ/

我们从这一切中得到了什么？！.. 只是你无法以一种好的方式完成你想要的 .. 我无法想象我想要这样做的情况。

替代方案

1 - 在文本字段标签中放置常量文本。

2 - 当用户提交表单时，捕获文本字段的值并将您的文本添加到其中。

3- 向用户添加帮助说明，说明此输入应如下所示（例如：mytext-yourtext）

【讨论】：

【解决方案3】：

以下是 John S 的答案的修改版本，以防止剪切/粘贴操作（例如通过右键单击）：

function makeInitialTextReadOnly(input) {
    var readOnlyLength = input.value.length;
    input.addEventListener('keydown', function(event) {
        var which = event.which;
        if (((which == 8) && (input.selectionStart <= readOnlyLength))
                || ((which == 46) && (input.selectionStart < readOnlyLength))) {
            event.preventDefault();
        }
    });
    input.addEventListener('keypress', function(event) {
        var which = event.which;
        if ((event.which != 0) && (input.selectionStart < readOnlyLength)) {
            event.preventDefault();
        }
    });
    input.addEventListener('cut', function(event) {
        if (input.selectionStart < readOnlyLength) {
            event.preventDefault();
        }
    });
    input.addEventListener('paste', function(event) {
        if (input.selectionStart < readOnlyLength) {
            event.preventDefault();
        }
    });
}

makeInitialTextReadOnly(document.getElementById('field'));

小提琴：http://jsfiddle.net/p0jyktvu/3/

【讨论】：