LINUX.ORG.RU

Неуловимый focus() на

 , , ,


0

1

Есть DIV, в котором абзацы, картинки, объекты. Область редактора, проще говоря...

<div ondrop="su_upload_img(event)" id="editor" style="overflow:hidden;z-index:auto"><p>#</p></div>

Есть функция, которая при падении картинки на DIV загружает её на сервер и вставляет в позицию курсора.

function su_upload_img(event){

event.preventDefault() //запрещаем делать браузеру что он хочет
//event.stopPropagation(); //или так

if(document.getSelection()!=''){ //если что-то выделено
alert('Отпусти выделение') //просим отпустить (чтобы не заменять выделенное картинкой)
return false
}

if(event.dataTransfer.files.length<=0){ //Если в редактор перетянут "не файл"
alert('Тяни файл или картинку!') //текст надо вставлять по Ctrl+V, а не драг-н-дропать
return false
}

if($('#editor').blur()){ //если DIV вне фокуса
alert('Поставь курсор в место вставки картинки!')
//тут пока без return
//даже если фокус есть и картинка успешно ставится в область редактора, всё равно лезет алерт о потере фокуса
}

var file=event.dataTransfer.files[0] //хватаем первый дропнутый файл в переменную

//тут аяксом заливаем файл на сервер

//вставка картинки в DIV редактора
document.execCommand('InsertHTML', false,'<img onclick="su_format_picture(this)" src="content/<?php echo $_SERVER['HTTP_HOST']; ?>/images/'+file.name+'">')

}

Проверка фокуса всегда орёт, что DIV вне фокуса (возможно, это потому что в фокусе дочерний абзац, а не сам DIV).

Как бы проверить фокус на DIV'е редактора, чтобы фокус определялся?

P.S: jQuery приветствуется.


event.preventDefault() //запрещаем делать браузеру что он хочет
//event.stopPropagation(); //или так

Норкоман, это разные штуки.

anonymous
()
Ответ на: комментарий от ovax

А у события (ondrop) есть таргет. Где оно произошло. Там и лови

По HTML5 есть доки, которые на «ненашем», - читать трудно.

Значит добавлю таргет

<div ondrop="su_upload_img(event,target)">

И что же дальше на JS надо проделать?

su_upload_img(event,target){
if(target.blur()){ //если таргет в состоянии блюр
alert('Редактор не в фокусе')
return false
}

Вставку хотелось бы организовать так:
1.) ставим каретку там, где хотим вставить картинку
2.) тянем картинку на любое место в редактируемом DIV'е
3.) картинка встает там, где была каретка

k0ttee
() автор топика
Ответ на: комментарий от anonymous

Норкоман, это разные штуки.

На выбор есть аж три:

preventDefault
stopPropagation
stopImmediatePropagation

Я вон там читал про разницу между ними.

Вроде правильно тушу дефолтные действия браузера... А закомментированный вариант, это так, на память.

k0ttee
() автор топика
Ответ на: комментарий от ovax

Таргет дает посмотреть «куда я картинку дропнул».

alert(event.target.id)
Если попасть картинкой в DIV, вижу алерт с его ID.


А если так

if($('#editor').children().focus()){
alert('фокус где-то есть') 
}
Фокус есть всегда.
Мда, из одной крайности попал в другую...

k0ttee
() автор топика
Ответ на: комментарий от k0ttee

Ну, наверно потому что при перетаскивании файла никакое поле не имеет фокуса. Сделай так:

$('#editor').on('blur', function() {
    $(this).data('caretPos', ... тут определяем позицию каретки ...);
});

А при ondrop читай это значение.

anonymous
()
Ответ на: комментарий от anonymous

Конечно, если при blur позицию каретки ещё можно прочитать. Если нет, то сохраняй её раньше - при onmousedown и onkeydown.

anonymous
()
Ответ на: комментарий от k0ttee

Ещё можно в твоём коде вместо blur() вызвать focus(). Фокус поставится на поле, в нём восстановится каретка там, где она была в последний раз. Ну и в это место уже вставляй картинку.

anonymous
()
Ответ на: комментарий от anonymous

Во, я придумал как сделать! Ежели exec выполнился, значит и фокус был.

//пробуем вставить
if(document.execCommand('InsertHTML', false,'<img 
onclick="su_format_picture(this)" src="content/<?php echo $_SERVER['HTTP_HOST']; ?>/images/'+file.name+'">')){
	//если вставилось, тогда и аякс-запрос на загрузку файла
}else{
	alert('Редактор вне фокуса!')
	return false
}

Теперь проблема: как проверить выделена ли картинка?
Выделение текста проверялось легко

if (document.getSelection() != ''){
alеrt('Отпусти текст!');
return false;
}

Но если выделена картинка, то document.getSelection() пуст.
Range, TextRange и Selection тоже равны пустоте.

k0ttee
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.