javascript - 如何使用 Javascript 将字符发送到文本输入

Question

在我的元素中:CSSHTML Keyboard我已经根据我的旧笔记本电脑键盘设置了一个键盘，这是我为学校做的一个小元素。问题是，我不确定如何将特定字符添加到键盘，例如:假设我单击 Shift，然后单击 A/a，我希望它在输入中放置“A”。如果有人可以为此提供一些信息，我将不胜感激。另请注意，我并没有尝试让 Every 键正常工作，只有基本键(字母、数字、大写、设置符号、Caps Lock、Shift、Space 和 Backspace)

我做了一个计算器:Simple Calculator 我尝试使用类似的方法将符号/字符发送到输入，但似乎效果不佳。

我尝试的方法是使用输入:

<input id="butn" class="output" type="textfield" name="ans" value="!The 
Text input is Currently Not Available!"></input>

然后使用少量 Javascript 将数学方程式从按钮发送到表单，然后再发送到输入，然后使用评估 Javascript 片段解决它们

这是当前代码的链接:CSSHTML Keyboard Finished

顺便说一句，很抱歉，如果键盘是“胶带和胶水”风格的，我对完善 CSS 大小调整和对齐仍然很陌生，所以现在我用边距和大小手动编写所有内容。

在测试了我使用的上面的计算器方法一段时间后，我设法让它在某个时候工作，但它是未定义的，所以在某种程度上我暂时放弃了这个元素，无论哪种方式, 我对我的成品很满意，即使我不能用它来打字。

Answer 1

您可以添加这个简单的 JS 来获取 keydown 事件，获取按下的键的值并将其打印在输入中。

然后你应该配置你不想在键入时写入的键(例如特殊操作)

我已经为您设置了退格键和一些示例键。

var output = document.querySelector('.output');

addEventListener('keydown', function(e) {
    e.preventDefault();     

    // Backspace 
    if ( e.key === 'Backspace' ){
        output.value = output.value.substr( 0, ( output.value.length -1 ) );    

    // The values you dont want to write literally
    } else if( e.key === 'Shift'     || 
               e.key === 'Control'   ||
               e.key === 'Alt'       ||
               e.key === 'AltGraph'   ) {

        output.value += '';

    }   else {
        // The keydown values
        output.value += e.key;
    }   
});

补充

关于如何使用按钮发送值的问题:

首先你必须设置“something”以便用js选择它们(例如一个类)， 并且您应该设置一个值属性，稍后再获取它。

<button type="button" class="letter keys" value="1" >!<br>1</button>

然后用循环选择所有按钮，并在单击它们时添加一个事件。

最后只需要元素的 attributes.value 并用它做你想做的。

这是一个例子:

var buttons = document.querySelectorAll('.letter');

for( let button of buttons ){
    button.addEventListener('click',function(e){
        console.log(button.attributes.value);       
    })
}

这对你有用，但我建议你阅读更多关于 JS 的基础知识，以便在此之前管理你想做的所有事情，因为这只是开始。

希望对你有帮助。