Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.11.2013, 11:34
Новичок на форуме
Отправить личное сообщение для Naizer Посмотреть профиль Найти все сообщения от Naizer
 
Регистрация: 27.11.2013
Сообщений: 3

Как реализовать отправку содержимого из iframe нажатием комбинации клавиш ctrl+enter
Здравствуйте!

Мучаюсь второй день над таким вопросом. Разбираю простейший визивиг редактор, по принципу приведённому здесь:

// ***********************
// ШАГ 1: Выводим iframe и получаем доступ к нему
// ***********************

// Выводим в HTML-поток iframe
document.write("<iframe scrolling='no' frameborder='no' src='#' id='frameId' name='frameId'></iframe><br/>");
// Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
// Получаем доступ к объектам window & document для ифрейма
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;

// ***********************
// ШАГ 2: Добавим на пустую страницу ифрейма произвольный HTML-код
// ***********************

// Формируем HTML-код
iHTML = "<html><head>\n";
iHTML += "<style>\n";
iHTML += "body, div, p, td {font-size:12px; font-family:tahoma; margin:0px; padding:0px;}";
iHTML += "body {margin:5px;}";
iHTML += "</style>\n";
iHTML += "<body><u>Содержимое</u> с <b>HTML</b>-<i>разметкой</i></body>";
iHTML += "</html>";
// Добавляем его с помощью методов объекта document
iDoc.open();
iDoc.write(iHTML);
iDoc.close();

// ***********************
// ШАГ 3: Инициализация свойства designMode объекта document
// ***********************

if (!iDoc.designMode) alert("Визуальный режим редактирования не поддерживается Вашим браузером");
else iDoc.designMode = (isGecko) ? "on" : "On";

// ***********************
// ШАГ 4: Простейшие элементы редактирования: жирность, курсив, подчеркивание
// ***********************

// Выведем HTML-код этих элементов
document.write("<input type='button' value='Ж' onclick='setBold()' class='bold' />");
document.write("<input type='button' value='К' onclick='setItal()' class='ital' />");
document.write("<input type='button' value='Ч' onclick='setUnder()' class='under' />");
// Запишем код функции, для выставления форматирования
// Используется метод execCommand объекта document
function setBold() {
    iWin.focus();
    iWin.document.execCommand("bold", null, "");
}
function setItal() {
    iWin.focus();
    iWin.document.execCommand("italic", null, "");
}
function setUnder() {
    iWin.focus();
    iWin.document.execCommand("underline", null, "");
}


В готовом сайте хочу заменить <textarea> на данный редактор. Но если сейчас сообщения можно отправлять с помощью ctrl+enter, то при использовании iframe я не могу понять, можно ли вообще реализовать отправку содержимого на сервер нажатием комбинации клавиш?
В приведённом коде отправку реализовал с помощью нажатия кнопки:

document.write("<input name='submitmsg' type='submit'  id='submitmsg' value='OK' class='subs' />");


$("#submitmsg").click(function(){     
    var clientmsg = iDoc.body.innerHTML;  
    $.post("post.php", {text: clientmsg});  
    iDoc.open();
	iDoc.write("");
	iDoc.close();
    return false;  
});


Можно ли повесить какой-нибудь обработчик нажатия ctrl+enter именно в самом iframe? И так, что бы было аналогично сценарию нажатия кнопки?

Были идеи поместить фрейм в форму, форме назначить событие «onkeypress» - результат отрицательный. Также посещала идея наложить <textarea> на фрейм, сделать её прозрачной, но всё равно не прокатывает. Также как и обрамлять в DIV.

Получалось реализовать нажатие ctrl+enter когда курсор находится вне фрейма, но это не подходит..

Естественно здесь включен designMode.

Если кто то сталкивался с подобным, прошу поделиться решением или всё же его отсутствием, если такое реализовать невозможно..
Ответить с цитированием
  #2 (permalink)  
Старый 27.11.2013, 12:54
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,484

function runOnKeys(func) {
	var codes = [17, 13];
	var pressed = [];
	iDoc.onkeydown = function(e) {
		e = e || iWin.event;
		pressed[e.keyCode] = 1;
		for(var i in codes) {
			if (!pressed[codes[i]]) return;
		}
		pressed = [];
		func();
	};
	iDoc.onkeyup = function(e) {
		e = e || iWin.event;
		delete pressed[e.keyCode];
	};
}

function sendIframe() {
	var clientmsg = iDoc.body.innerHTML; 
	$.post('post.php', { text: clientmsg }, function(data) {
		iDoc.open();
		iDoc.write(data);
		iDoc.close();
	});
}

runOnKeys(sendIframe);
Ответить с цитированием
  #3 (permalink)  
Старый 27.11.2013, 13:28
Новичок на форуме
Отправить личное сообщение для Naizer Посмотреть профиль Найти все сообщения от Naizer
 
Регистрация: 27.11.2013
Сообщений: 3

Огромное спасибо! Функция отрабатывает просто на ура, но маленькая загвоздка.. Отправляется один раз. После того как произошла очистка и отправляется новый текст, ничего не происходит...

Последний раз редактировалось Naizer, 27.11.2013 в 13:31.
Ответить с цитированием
  #4 (permalink)  
Старый 27.11.2013, 14:38
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,484

function sendIframe() {
	var clientmsg = iDoc.body.innerHTML; 
	$.post('post.php', { text: clientmsg }, function(data) {
		iDoc.body.innerHTML = data;
	});
}
Ответить с цитированием
  #5 (permalink)  
Старый 27.11.2013, 15:39
Новичок на форуме
Отправить личное сообщение для Naizer Посмотреть профиль Найти все сообщения от Naizer
 
Регистрация: 27.11.2013
Сообщений: 3

Благодарю! Работает как часы )
Есть чему поучиться, буду разбираться.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
Как реализовать переход с одной страницы на другую с помощью клавиш "стрелок" bazilio2010 Общие вопросы Javascript 6 13.11.2011 21:58