使用 jQuery 动态地将文本附加到文本框的末尾答案

【问题标题】：Append text to end of text box dynamically with jQuery使用 jQuery 动态地将文本附加到文本框的末尾
【发布时间】：2012-11-06 01:09:30
【问题描述】：

我有以下输入标签：

<input type="text" id="title" class="title" maxlength="20>

当用户键入时，我需要将“day”附加到框中文本的末尾。这是如何用 jQuery 完成的？
我试过这个：

$('#title').on('keyup', function() {
this.value = this.value+' day';
});

但是没有用。

【问题讨论】：

“当用户键入时”是什么意思？如果他们输入“a”并且您附加“day”以获得“aday”，然后他们将光标移动到末尾并输入“b”怎么办？然后您是否再次附加“day”以获得“adaybday”？等到用户离开该字段然后测试该值是否已经以“day”结尾（如果不添加则添加）不是更好吗？尝试blur 事件而不是keyup...

标签： javascript jquery input

【解决方案1】：

使用 jQuery 将文本追加到末尾，然后将插入符号移动到所需位置：

$('#title').on('keyup', function(e) {
    // Ignore if backspace is pressed
    if(e.keyCode == 46){
       return false;
    }

    // Set the value based on the current value length
    // If it's longer than 3, "day" is already appended
    this.value = (this.value.length<3)?this.value+="day":this.value;

    // Move caret to the latest added character
    var caretPos = this.value.length-3;
     if(this.createTextRange) {
        var range = this.createTextRange();
        range.move('character', caretPos);
        range.select();
    }
    else {
        if(this.selectionStart) {
            this.focus();
            this.setSelectionRange(caretPos, caretPos);
        }
        else
            this.focus();
    }
});

Live, working jsFiddle example

【讨论】：

@user1689607：我误解了这个问题。我正在修复它。
不过，几乎不可能全选并删除。
@Jaxkr：没问题。不过我无法解决全选 (CTRL+A) 问题。