21.08.2013, 16:16
|
|
Интересующийся
|
|
Регистрация: 15.08.2013
Сообщений: 12
|
|
|
Виртуальная клавиатура и буфер обмена
Здравствуйте. Возникло несколько вопросов, ответ на которые не смог найти. Подскажите, пожалуйста:
1. Встал вопрос в написании небольший виртуальной клавиатуры. Есть ли в JS возможность эмулировать нажатия кнопок на клавиатуре? Нашел, что можно считывать событие нажатия, а вот создать такое событие - что-то глухо. При этом, полно работающих клавиатур, очевидно, как-то делают это люди. Хотелось бы нативный вариант, без jQuery и других фреймворков. Если можно, подскажите, как это сделать, или ткните носом, где почитать.
2. Есть ли возможность работать с буфером обмена? Задача была такова, чтобы информацией с одного сайта заполнить форму на другом, но, как я уже выяснил, сделать это одним скриптом не удастся из-за разных доменов. Хотелось бы, в таком случае, сделать это в два клика, используя буфер обмена в качестве временного хранилища. Как можно писать в него и читать из него?
Заранее спасибо за ответы.
|
|
21.08.2013, 17:44
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от Artyom
|
|
Нашел, что можно считывать событие нажатия, а вот создать такое событие - что-то глухо
|
Создать можно через element.dispatchEvent() но это ничего не даст. Так как программно сгенерированые события не влекут за собой какие либо действия со стороны браузера (например, вставку символа в текстовое поле). Вставляй символы напрямую.
|
Сообщение от Artyom
|
|
Как можно писать в него и читать из него?
|
Писать в него можно (через flash и частично execCommand), а читать практически никак. |
|
21.08.2013, 18:08
|
|
Интересующийся
|
|
Регистрация: 15.08.2013
Сообщений: 12
|
|
|
Напрямую вставлять - так я уже реализовал. Добавляю нажатый символ к .value нужного поля. Но беда в том, что такой метод не использует курсор ввода - дописать в середину ничего не выходит. Как это исправить?
|
|
21.08.2013, 21:04
|
|
Профессор
|
|
Регистрация: 12.04.2010
Сообщений: 557
|
|
|
Сообщение от Artyom
|
|
Как это исправить?
|
искать по словам document.selection.createRange, selectionStart, selectionEnd... |
|
22.08.2013, 12:55
|
|
Интересующийся
|
|
Регистрация: 15.08.2013
Сообщений: 12
|
|
|
Сообщение от Яростный Меч
|
|
искать по словам document.selection.createRange, selectionStart, selectionEnd...
|
Если я правильно понимаю, то курсор будет выделением с началом и концом в одном месте? Спасибо, читал про выделение, но не думал о нем в таком ключе. Да, так должно сработать, буду пробовать. Благодарю! |
|
26.08.2013, 19:24
|
|
Интересующийся
|
|
Регистрация: 15.08.2013
Сообщений: 12
|
|
Пишу потихоньку, возник один вопрос.
У неИЕ браузеров есть selectionStart и selectionEnd для определения начала и конца выделения. А вот у ИЕ с их TextRange таких свойств вроде как нету. Как, в таком случае, узнать смещение выделения в ИЕ?
Суть проблемы заключается в следующем. Есть такой кусочек кода:
var select = document.selection.createRange();
select.text = number;
Он работает как надо, вставляя number туда, где находится каретка. Но если выделить часть введенной информации и запустить этот код (в моем случае - он запускается как часть функции) - то он отработает как и задумано, кроме одного момента - пропадает каретка. И даже form.focus() ее не возвращает - видимо, пропадают координаты места, где она должна стоять. Как это поправить? |
|
26.08.2013, 20:31
|
|
Профессор
|
|
Регистрация: 12.04.2010
Сообщений: 557
|
|
|
Сообщение от Artyom
|
|
form.focus()
|
меня тут смущает слово form.
на всякий случай - надо делать focus для текстареи, а не для формы. |
|
26.08.2013, 21:01
|
|
Интересующийся
|
|
Регистрация: 15.08.2013
Сообщений: 12
|
|
|
form в данном случае - переменная, содержащая input. И вроде как эта запись работает во всех иных случаях.
|
|
27.08.2013, 10:04
|
|
Интересующийся
|
|
Регистрация: 15.08.2013
Сообщений: 12
|
|
В общем, мои попытки успехом так и не увенчались. Вот полный код странички, если кто-то захочет протестировать самостоятельно:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="text" onfocus="focused = true;" onblur="focused = false;" style="margin: 20px 0;"><br>
<button onclick="addNumber(1)">1</button> <button onclick="addNumber(2)">2</button> <button onclick="addNumber(3)">3</button><br>
<button onclick="addNumber(4)">4</button> <button onclick="addNumber(5)">5</button> <button onclick="addNumber(6)">6</button><br>
<button onclick="addNumber(7)">7</button> <button onclick="addNumber(8)">8</button> <button onclick="addNumber(9)">9</button><br>
<button onclick="">x</button> <button onclick="addNumber(0)">0</button> <button onclick="">x</button><br>
<script>
var focused = false;
var form = document.getElementById("text");
var IE = top.execScript?true:false; //true только для IE
form.focus();
function addNumber(number) {
form.focus();
if (!IE) {
if (focused) {
var start = form.selectionStart;
var end = form.selectionEnd;
form.value = form.value.slice(0, start) + number + form.value.slice(end);
form.setSelectionRange(start+1, start+1);
form.focus();
}
} else {
if (document.selection.createRange().parentElement().id == "text") {
var select = document.selection.createRange();
select.text = number;
form.focus()
}
}
}
</script>
</body>
</html>
И еще. Обратил внимание, что Хром и фф в случае выделения части введенной информации и клике на цифру корректно заменяет ее (такого поведения я и хочу добиться от всех браузеров), опера НЕ заменяет, но добавляет в конец (судя по всему, она при нажатии кнопки сбрасывает выделение, оставляя только каретку, и в итоге уже в функции начало и конец выделения - одна и та же точка), а вот ИЕ... В общем, вот ИЕ я не понимаю вообще. Он не делает то, что я предполагал, но иногда при нажатии кнопки почему-то (???) вдруг ставит каретку. Я решительно не понимаю, чем руководствуется этот браузер, и никакой закономерности проследить у меня не вышло. Помогите разобраться с этой поганью, пожалуйста...
|
|
|
|
