Почему мое текстовое поле не отображается поверх элемента canvas? - PullRequest
Новая
       13

Почему мое текстовое поле не отображается поверх элемента canvas?

1 голос
/ 24 сентября 2011

Я бы хотел использовать Raphael.js и создать несколько хороших диаграмм / SVG-графики для своего сайта.Я хочу, чтобы пользователи могли вводить текстовый контент, который обычно был бы через элемент <input type="text"> в обычном html.

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

Перефразируя Вопрос

Почему я не вижу текстовое поле, если я делаю это: 

<canvas style="background-color:blue;height:100px;width:100px>
    <input type="text" style="background-color:white;z-index:101" />
</canvas>

и если это невозможно, каковы альтернативы?

Большое спасибо

1 Ответ

4 голосов
/ 24 сентября 2011

Должен быть какой-то способ возврата к альтернативному контенту (например, статическому изображению или тексту «Получить браузер с поддержкой canvas») для старых браузеров, которые не понимают элемент canvas. Дочерние элементы элемента canvas предназначены для этой цели.

Однако вы можете расположить ввод поверх холста с помощью position:absolute (относительный или статический): 

<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>

Вот живая демонстрация .

...