Как отправить символы для ввода текста с использованием Javascript

Question

В моем проекте: CSSHTML Keyboard Я настроил клавиатуру на основе моей старой клавиатуры ноутбука, это был небольшой проект, который я сделал в качестве домашней работы для школы.Проблема в том, что я не уверен, как добавить определенные символы в клавиатуру, например, например: скажем, я нажимаю Shift , а затем A / a , я хочу его разместить "А "на входе.Если бы кто-то мог принести мне немного информации для этого, я был бы признателен.Также для более позднего уведомления, я не пытаюсь заставить Каждый работать так, как должен, только базовые клавиши (буквы, цифры, заглавные буквы, символы набора, Caps Lock, Shift, пробел и Backspace)

Я создал калькулятор: Простой калькулятор и попытался использовать аналогичный метод отправки символа / символа на вход, но, похоже, он не работал должным образом.

Метод, который я попробовал, заключался в использовании ввода:

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

, а затем с помощью небольшого кусочка Javascript для отправки математических уравнений с кнопок на форму и затем на вход, а затем их решения с помощью фрагмента кода Javascript для оценки

Вот ссылка на текущий код: CSSHTML Keyboard Finished

Кстати, извиняюсь, если клавиатура собрана воедино в стиле «утиная лента и клей», I 'Я все еще неплохо знаком с совершенствованием CSS Размеры и выравнивание, так что сейчас я пишу все вручную с полями и размерами.

Через некоторое время тестирования метода калькулятора, который я использовал выше, яВ какой-то момент объявлению удалось заставить его работать, но оно оказалось неопределенным, так что я как бы временно разочаровался в проекте. В любом случае, я доволен своим готовым продуктом, даже если не могу его использовать длявведите символы.

Answer 1

Вы можете добавить этот простой JS, чтобы получить событие нажатия клавиши, получить значение нажатой клавиши и распечатать его на входе.

Затем вы должны настроить ключи, которые вы не хотите писать при их наборе (например, специальные действия)

Я поставил для вас клавишу возврата и несколько примеров ключей.

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>

Затем выберите все кнопки с помощью петли и добавьте событие, когда нажимаете на них.

Наконец, возьмите значение attribute.value элемента и делайте с ним все, что хотите.

вот пример:

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

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

Это будет работать для вас, но я рекомендую вам прочитать немного больше об основах JS, чтобы управлять всем, что вы хотите сделать до этого, потому что это только начало.

Надеюсь, это поможет вам.