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

我正在尝试使用Javascript在文本框的开头创建一个包含一些只读文本的文本框，然后允许在只读文本后面进行编辑。 我怎么能在Javascript / jquery中这样做？

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

Answer 2

这是一些想法

大致是jquery的解决方案

HTML

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

CSS

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

http://jsfiddle.net/kaf4j/

组合来检索值

HTML

    
 
 get value 

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 – 在text-field标签中放置常量文本。

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

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

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