时间戳

首页 > 解决方案 > 如何使用 Javascript 将字符发送到文本输入

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

问题描述

在我的项目中：CSSHTML 键盘我已经根据我的旧笔记本电脑键盘设置了一个键盘，这是我作为学校家庭作业制作的一个小项目。问题是，我不确定如何将特定字符添加到键盘，例如：假设我单击Shift然后A/a，我希望它在输入中放置“A”。如果有人能为我带来一些信息，我将不胜感激。同样对于后来的通知，我并没有试图让每个键都像它应该的那样工作，只有基本键（字母、数字、大写、设置符号、大写锁定、Shift、空格和退格键）

我制作了一个计算器：简单计算器 ，并尝试使用类似的方法将符号/字符发送到输入，但似乎效果不佳。

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

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

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

这是当前代码的链接：CSSHTML 键盘完成

顺便说一句，如果键盘采用“胶带和胶水”样式组合在一起，我深表歉意，我对完善 CSS 大小和对齐仍然很陌生，所以现在我用边距和大小手动编写所有内容。

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

标签： javascripthtmlcsskeyboard

解决方案

你可以添加这个简单的 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;
    }   
});

补充

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

首先你必须设置“一些东西”以便用 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 基础知识的内容，以管理你在此之前想做的所有事情，因为这只是开始。

希望它可以帮助你。

推荐阅读