【问题标题】：How to append input in the same field after entering text in it在其中输入文本后如何在同一字段中附加输入
【发布时间】：2014-05-28 09:33:16
【问题描述】：

我有一个输入字段，我想在输入时附加它的文本并将之前的值保留在其中

以下是代码

<input type="text" id="txt1" name="type_name" value="Value1-" onchange="dosomething()">

我想要的是当用户开始输入时，输入字段的起始文本应保留在那里，即“Value1-”，并将文本附加在其中，如“Value1-3433”。

我希望你能得到我的一点帮助，我们将不胜感激。

【问题讨论】：

你能解释更多吗？这个小提琴适合你吗？ jsfiddle.net/Ry3Lv/1
好吧，我想在按键上附加文本的输入，同时保留“Value1-”文本并在其后附加新写入的文本。更简单的是，当表单加载值“Value1-”时，输入字段已经被填充，并且将是只读的，我想要的只是 Value1- 文本是只读的，我可以在它之后编辑和输入新文本
这意味着，用户不能删除那个“value1”？
是的用户不能删除值1..你是对的
@ShakoorAlam 检查我的答案，它不允许用户删除Value1-

标签： jquery html

【解决方案1】：

如果我猜对了，使用纯 JavaScript，这就是你需要做的：

当页面以<body onload="start()"> 加载时调用函数start()。在输入 TextField 中打印文本“Value1-”。由于这个函数只被调用一次，Value1-只会被打印一次。
创建另一个function append()，您应该使用onchange() 调用它并执行以下操作：
`document.getElementById('outputText').value=document.getElementById('txt1').value.

希望这会有所帮助。

【讨论】：

为什么start()只用于设置文本字段的值？

【解决方案2】：

这是你想要的吗？

DEMO

jQuery

$('#txt1').on('keyup',function(){
    console.log($(this).val().substr( 0 , 7)) ;
    if($(this).val().substr( 0 , 7) != "Value1-") {
        $(this).val('Value1-');
    }
});

HTML

<input type="text" id="txt1" name="type_name" value="Value1-" >

【讨论】：

感谢您的支持我已接受您的回答:)

【解决方案3】：

使用下面的代码来实现。

jQuery 代码：

$('#txt1').on('keyup',function(){

var str=$(this).val();
var newstr = str.substring(0, 7);

if(newstr != "Value1-")
{       
    $(this).val("Value1-");
}  

});

HTML 代码：

<input type="text" id="txt1" name="type_name" value="Value1-">

工作 Jsfiddle 链接

http://jsfiddle.net/spdZW/1/

【讨论】：

只删除“Value1-”中的“-”，然后添加另一个字符。看看会发生什么
它附加了另一个 Value1-
还是有问题，再检查一下。

【解决方案4】：

Working Fiddle

使用position:absolute附加标签
HTML

<label id="lbl" for="txt1"></label> <input type="text" id="txt1" name="type_name" value="" />

并触发onchange 事件，以更改添加Value1- 和用户输入...
添加Value1onchange事件

$('#txt2').change(function () { var str = $(this).val().replace('Value1-',''); $(this).val('Value1-'+str); });
终于，我想你需要的就在这里……

$('#txt3').keypress(function (e) { var pos = $(this).getCursorPosition(); if (pos < 7 ||(pos==7 && e.keyCode == 8) ) { e.preventDefault(); } });

来源：在 this answer @MarkB29
的大力支持下制作

【讨论】：

将光标放在“Value1-”之间并输入任何内容，它将允许您输入。那是错误。您还应该检查文本字段的值，而不仅仅是光标位置。
@TechnoKnol 感谢您指出错误...更新了小提琴