在输入字段中的最后一个字母后显示特定符号

Question

如何显示这个符号“|”在输入字段中的最后一个字母之后？示例：如果用户在输入中输入任何文本，假设他输入了 "abc" 我希望它在输入字段中看起来像这样 "abc|" - 在最后一个字符后使用 [= 添加 (|) 16=]..

我的想法是，我有一个禁用的输入，所以没有打字光标出现在里面，我想要这个符号“|”就像打字光标。

Answer 1

您想执行如下操作。您可以在每个选定的时间间隔使用 javascript 的 setInterval 函数来运行 - 在本例中为 500ms.

每次检查是否 placeholder === '|' 如果是则切换它。

请参阅下面的运行ning 代码示例。

var inpt = document.getElementById("input-box"),
 ltr = document.getElementById("ltr");

ltr.onclick = function () {
inpt.value += "Q"
}

setInterval(function() {
   if (document.getElementById('input-box').placeholder === '|') {
       document.getElementById('input-box').placeholder = '';
   } else {
       document.getElementById('input-box').placeholder = '|';
   }

    if(document.getElementById('input-box').value.slice(-1) === 'Q'){
       document.getElementById('input-box').value += '|';
    } else if(document.getElementById('input-box').value.slice(-1) === '|') {
        document.getElementById('input-box').value = document.getElementById('input-box').value.slice(0, -1);
    }
}, 500);

<input type="text" id="input-box" disabled>
   <button id="ltr">Letter Q
</button>

在输入字段中的最后一个字母后显示特定符号

show a specific symbol after the last letter in an input field

javascript

input

cursor