Javascript 按空格键后隐藏输入字段中的文本

我想创建一个一次只能看到一个单词的输入字段。例如，如果用户想要键入“Hello world！”在输入字段上， 他们应该得到以下结果

Typing 'Hello'

+-------------------------+
+Hello|                   + 
+-------------------------+

Pressing space bar
+-------------------------+
+|                        + 
+-------------------------+

Typing 'world!'
+-------------------------+
+world|                   + 
+-------------------------+

按backspace键时，应可以访问以前写入的文字 这应该在纯JavaScript和css中完成；jQuery和其他库不是一个选项 下面是一个模拟来演示所需的结果

html

JavaScript

    var myInput  = select('myInput');
    var myOutput = select('simulateTyping');
    var notStarted  = true;
    var typed;

    Array.prototype.lastIndex = function () {
        return this.length - 1;
    }

    function select(id) {
        return document.getElementById(id)
    }

    function start() {
        if (notStarted){
            setInterval(theLoop, 100)
            notStarted = false;
        }
    }

    function theLoop() {
        typed = myInput.value.split(/\s+/);
        myOutput.value = typed[typed.lastIndex()]
    }

使用keyup为输入提供更新其值的时间 使用标准Event.key读取插入的字符 使用Array.prototype.pop从数组中删除并返回最后一项 常量字=[]； 常数存储器=ev=>{ 常数inp=ev.target； const val=inp.value.trim； ifev.key==''{ const valSpl=val.split'； words.pushvalSpl[0]； inp.value=valSpl[1]| |； } ifev.key=='Backspace'&&val=={ inp.value=words.length？words.pop:； } console.clear；console.logwords； } 文档。查询选择器“myInput”。添加了监听器“keyup”，存储器； 使用keyup为输入提供更新其值的时间 使用标准Event.key读取插入的字符 使用Array.prototype.pop从数组中删除并返回最后一项 常量字=[]； 常数存储器=ev=>{ 常数inp=ev.target； const val=inp.value.trim； ifev.key==''{ const valSpl=val.split'； words.pushvalSpl[0]； inp.value=valSpl[1]| |； } ifev.key=='Backspace'&&val=={ inp.value=words.length？words.pop:； } console.clear；console.logwords； } “查询器”或“添加器”输入；

---

这是作为教育任务分配给你的吗？这是作为教育任务分配给你的吗？当试图编辑一个单词键入一个单词，然后尝试删除你输入的最后一个字符时，退格会出错，退格处理程序应该检查您是否有一个单词并且行为正常，直到您完全删除它，然后返回到旧的one@RokoC.Buljan这样可以达到95%的期望输出，但是它不能处理用户把文本插入光标放在文本中间，然后按空格键的情况，在这种情况下，插入光标后的文本应为输入字段中的当前文本，而插入光标前的文本应添加到键入的单词列表中。当尝试编辑单词键入一个单词，然后尝试删除您输入的最后一个字符时，退格会出错，退格处理程序应该检查您是否有一个单词并且行为正常，直到您完全删除它，然后返回到旧的one@RokoC.Buljan这样可以达到95%的期望输出，但是它不能处理用户把文本插入光标放在文本中间，然后按空格键的情况，在这种情况下，插入光标后的文本应为输入字段中的当前文本，而插入光标前的文本应添加到键入的单词列表中。

<div class="container">
<p> The desired output when a user starts typing</p>
<input type="text" id="simulateTyping">


<p> When a user presses space bar, they should get the effect shown above but in the same input field. </p>
<p> The previously written text should be accessible when pressing backspace</p>
<input type="text" id="myInput" placeholder="Start typing to see the effect" onkeypress="start()">
</div>

    body {
        text-align: center;
        font-family: monospace;
    }

    .container {
        margin: auto;
        width: 500px;
        border: 1px solid #eee;
        font-size: 17px;
    }

    input {
        width: 300px;
        height: 40px;
        font-family: inherit;
        font-size: inherit;
    }

    var myInput  = select('myInput');
    var myOutput = select('simulateTyping');
    var notStarted  = true;
    var typed;

    Array.prototype.lastIndex = function () {
        return this.length - 1;
    }

    function select(id) {
        return document.getElementById(id)
    }

    function start() {
        if (notStarted){
            setInterval(theLoop, 100)
            notStarted = false;
        }
    }

    function theLoop() {
        typed = myInput.value.split(/\s+/);
        myOutput.value = typed[typed.lastIndex()]
    }