Question

我正在制作一个互动故事，我想让读者在某个字段中键入内容，但不是输入任何内容，而是输入预先写好的信息。它看起来像hackertyper.net。

Answer 1

我使用输入文本进行事件onkeydown =＆＃34; KD（）＆＃34; 。在KD方法中，我检查按下了哪个keyCode。然后e.target.value（输入标签）追加新的字符。

也许会帮助你（建立你自己的逻辑）：

＆＃13;

document.body.style.backgroundColor = 'black';

//alert(document.body.style.backgroundColor)

function KD (e) {

    e = e || window.event
    KEY = e.keyCode || e.which
     
     // alert(KEY)
     
       switch (KEY) {
        case 65:
            e.target.value += " what a"
            break;
        case 86:
            e.target.value +=' wolf ';
            break;
        case 84:
            e.target.value +=' empty trash ';
            break;
        case 79:
            e.target.value +=' ok ';
            break;
            
    }
    
}

＆＃13;

<input type="text" value="" style="background-color:black;color:lime" onkeydown="KD()" />

＆＃13;

Answer 2

我为您的问题陈述构建了JSFiddle。

基本上，我所做的是将一些消息写入列表并从 0-list.length 生成随机索引，这允许我随机选择消息时尚。然后我在用户的按键上将消息附加到textarea。

开始在textarea中输入，它的工作方式类似于 hackertyper.net 。您可以将自己的消息添加到列表中。

这是代码。

var pre_msg = ["The brown", "Fox jumped", "over the well with", "or wait", "was it a pond", "well", "that's beside the point now.", "Oh and not to forget", "HACKED !"]

function myFunction() {
  var index = Math.floor(Math.random() * pre_msg.length);
  document.getElementById("text").value +=pre_msg[index]+" ";
}

<textarea id="text" style="width:300px;height:200px" value="" onkeypress="myFunction(); return false;"></textarea>

如何在输入内容时显示预先写好的文字？

2 个答案: