Javascript 如何将静态文本添加到输入值

Javascript 如何将静态文本添加到输入值,javascript,php,Javascript,Php,我有一个输入元素,我想做的是当用户输入时,这个静态文本将始终出现在用户输入之后 h "staticTextHere" hello "staticTextHere" hello world "staticTextHere" 我尝试了一些技巧,但这里有太多的问题。有没有办法做到这一点 这是我的密码 <input type="text" id="staticTextId" name="staticTextName" ..... /> 我已经在你的文本中尝试过了,只有当文本不在其中并且用

我有一个输入元素,我想做的是当用户输入时,这个静态文本将始终出现在用户输入之后

h "staticTextHere"
hello "staticTextHere"
hello world "staticTextHere"
我尝试了一些技巧,但这里有太多的问题。有没有办法做到这一点

这是我的密码

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

我已经在你的文本中尝试过了,只有当文本不在其中并且用户离开元素(模糊)并得到以下结果时,才会添加:

脚本js:

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



希望这就是你所寻找的

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


函数appendInput(){
var el=document.getElementById('staticTextId');
var pos=doGetCaretPosition(el)
如果(标高值){
var yourText='yourText'
if(el.value.indexOf(yourText)纯JS版本:

jQuery:


“staticTextHere”应该在输入中还是在页面上的任何地方“保持原样”呢?你可以这样做,但不能。如果用户
CTRL+SHIFT+END+DEL
,或者只是
DEL
,或者将光标移到末尾和
退格等……那么所有情况都很难处理。@UnskilledFreak“staticTextHere”必须在输入中。您的代码工作正常,但唯一的问题是“del”键。您能处理“del”键吗?将事件添加到func arglist中,并将“del”@UnskilledFreak的键代码katch我已经做了,但不知道如何处理del@hellzone不知道确切情况,但请通过
console.log(事件)进行尝试
您会发现一些关于按下的键及其编号的信息,因为它被称为keycode唯一的问题是“del”键。您能修复它吗?
function makeStatic(elem) {
    var staticText = "staticTextHere"
    if(elem.value.indexOf(staticText)==-1) {
        elem.value = elem.value + " " + staticText;
    }
}
<input type="text" id="staticTextId" name="staticTextName" value="" onblur="makeStatic(this);">
<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();
    }
}
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);    
});