0

var canvas = document.getElementById("draw");
var x = canvas.getContext("2d");
x.font = '32px Arial';
x.fillStyle = '#007439';
x.fillText("A", 15, 35);

$("#a").click(function() {
  var clone = $(this).clone();
  console.log(clone);
});
 #stroka {
   position: absolute;
   top: 20px;
   left: 20px;
   right: 10px;
   height: 100px;
   background: white;
   padding: 5px;
   border: solid 1px black;
 }

 #a {
   position: absolute;
   top: 140px;
   left: 20px;
   width: 50px;
   height: 50px;
   background: white;
   padding: 5px;
   border: solid 1px black;
 }
<div>
  <div id="stroka"></div>
  <div id="a" class="item">
    <canvas id='draw' width='50' height='50'></canvas>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>

Как сделать так, чтобы при нажатии на клавишу A с помощью мыши, символ А выводился в поле выше(как строка)?

0

1 ответ 1

1

Вот решение, учитывающее ряд замечаний:

  1. JQuery здесь совершенно не нужен.
  2. Имеет смысл выполнить клавиатуру в виде набора полноценных кнопок (элементов button), а не псевдокнопок на canvas-ах.
  3. Для запрета выделения текста необходимо вызывать event.preventDefault() в обработчике нажатия кнопки.
  4. Абсолютное позиционирование заменено на относительное. Пусть обозреватель сделает всё за нас.

"use strict";

var textLine;

function onLoad()
{
    textLine = document.getElementById("textLine");
}

function addChar(character)
{
    textLine.textContent += character;
}
#textLine {
    height: 100px;
    background: white;
    margin: 10px 0px;
    padding: 5px;
    border: solid 1px black;
}

 button {
    width: 50px;
    height: 50px;

    cursor: pointer;
    font: 32px Arial;
    color: #007439;

    /* На случай, если необходимы именно белые кнопки с чёрной границей */
    /* background: white;          */
    /* padding: 5px;               */
    /* border: solid 1px black;    */
 }
<body onload="onLoad()">
    <div>
        <div id="textLine"></div>
        <button onclick="addChar('a'); event.preventDefault()">A</button>
        <button onclick="addChar('b'); event.preventDefault()">B</button>
        <button onclick="addChar('c'); event.preventDefault()">C</button>
        <button onclick="addChar('∧'); event.preventDefault()">∧</button>
        <button onclick="addChar('∨'); event.preventDefault()">∨</button>
        <button onclick="addChar('¬'); event.preventDefault()">¬</button>
    </div>
</body>

2
  • а знаки конъюнкции или дизъюнкции, и отрицания? 28 апр 2016 в 22:24
  • @Светлана, обновил пример. При необходимости добавить другие кнопки делайте по аналогии. 29 апр 2016 в 3:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.