如何将静态文本添加到输入值 - How to add static text to input value

How to add static text to input value

本文关键字：输入添加文本静态 | 更新日期: 2023-09-27

>我有一个输入元素，我想做的是当用户键入此静态文本时，该静态文本将始终出现在用户输入之后。

h "staticTextHere"
hello "staticTextHere"
hello world "staticTextHere"

我尝试了一些技术，但这里有很多问题。有什么想法如何实现这一目标吗？

这是我的代码;

<input type="text" id="staticTextId" name="staticTextName" ..... />

和 js;

.on('keydown', function (event) {
         var textLength = document.getElementById($id).value.length;
         document.getElementById($id).value = document.getElementById($id).value.substr(0,textLength - staticText.length) + staticText;
 });

普通 JS 版本：在线演示

jQuery ：在线演示

document.getElementById("staticTextId").addEventListener('keyup', function(){
    var str = this.value;
    var suffix = " static text";
    if(str.search(suffix) === -1){
        str += suffix;
    }
    var actualLength = str.length - suffix.length;
    // set the value
    this.value = str.substr(0,actualLength) + suffix;
    // set cursor position
    this.setSelectionRange(actualLength,actualLength);    
});

误解了这个问题，现在我明白了 - 这有效但同意@lolka_bolka - 有很多可能出错的地方

在这里摆弄

<input type="text" id="staticTextId" name="staticTextName" onkeyup="appendInput();" />
function appendInput(){
    var el = document.getElementById('staticTextId');
    var pos = doGetCaretPosition (el)
    if(el.value){
      var yourText = ' your text'
      if(el.value.indexOf(yourText)<1){
        el.value = el.value + yourText;
      }
      setCaretPosition(el, pos)
    }
}
function doGetCaretPosition (ctrl) {
    var CaretPos = 0;   // IE Support
    if (document.selection) {
    ctrl.focus ();
        var Sel = document.selection.createRange ();
        Sel.moveStart ('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
    return (CaretPos);
}
function setCaretPosition(ctrl, pos){
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

我已经用你的文本试过了，只有当文本不在那里并且用户离开元素(模糊(并得到这个时，才会添加它：

脚本 JS：

function makeStatic(elem) {
    var staticText = "staticTextHere"
    if(elem.value.indexOf(staticText)==-1) {
        elem.value = elem.value + " " + staticText;
    }
}

.html：

<input type="text" id="staticTextId" name="staticTextName" value="" onblur="makeStatic(this);">

希望这就是你要找的