Requerir
1. Al entrar en @, aparece el menú de amigos a juego
2. Cuando el cursor ingrese a la etiqueta que contiene "@friends", el menú aparecerá
3. Al presionar Backspace para eliminar, si el cursor está frente a la etiqueta que contiene "@friends", el menú aparecerá.
4. Compatible con IE, Firefox.
Prácticas específicas
Para los requisitos 1, es natural pensar en eventos vinculantes al cuadro de entrada. Aquí necesitas atar a Mousedown, no Mouseup. Porque si es mouseup, usar event.preventDefault () no puede evitar que el teclado ingrese @. Además, el uso de devoluciones de llamada False en Event aquí no funcionará.
Después de vincular el evento Mousedown, debe insertar una etiqueta personalizada que contenga "@friends". El cuadro de entrada en Sina Weibo está hecho con Textea. No puedo saber cómo se maneja internamente, así que tengo que leer Baidu Tieba.
Puede ver que la etiqueta <span class = 'at'> </span> se ha insertado en la barra post. Esto debería ser conveniente para la coincidencia de fondo con expresiones regulares.
Específico
La copia del código es la siguiente:
vm.check_key = function (e) {
Var Editor = $ ('Editor'), Range;
if (e.shiftkey && e.keycode == 50) {
if (document.selection && document.selection.createrange) {
range = document.selection.CreaterGe ();
range.pastehtml ("<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}demás{
document.execCommand ("inserthtml", false, "<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}
E.PreventDefault ();
}
};
Esto requiere inserción en el cursor, por lo que se usa el rango.
Luego se muestra el menú, la clave es cómo colocarlo. Mi enfoque es muy basura, que es agregar una ID al tramo insertado y luego localizar el menú de acuerdo con la posición de la identificación del tramo. Si hay una mejor manera, hágamelo saber.
Específico
La copia del código es la siguiente:
función at_box_show (at) {
var at_pos = avalon ($ (at)). posicion ();
$ ('at_box'). style.left = at_pos.left+'px';
$ ('at_box'). style.top = at_pos.top+16+'px';
$ ('at_box'). style.display = 'block';
}
var at_index = 0, cur_index = 0;
avalon.define ('editor', function (vm) {
vm.item_click = function () {
$ ('at'+cur_index) .innerhtml = "@"+this.innerhtml;
$ ('at_box'). style.display = 'none';
at_index ++;
};
vm.check_key = function (e) {
Var editor = $ ('editor'), a = getCharacterprecedingCaret (editor), rango;
if (e.shiftkey && e.keycode == 50) {
if (document.selection && document.selection.createrange) {
range = document.selection.CreaterGe ();
range.pastehtml ("<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}demás{
document.execCommand ("inserthtml", false, "<span id = 'at"+at_index+"' class = 'at_span'>@</span>");
}
at_box_show ('at'+at_index);
cur_index = at_index;
E.PreventDefault ();
}
};
});
AT_SHOW_BOX localiza AT_BOX de acuerdo con la ID de SPAN recién insertada y luego muestra el menú. Cur_Index representa la ID de SPAN donde se encuentra actualmente el cursor. Establezca esta variable porque el usuario puede rebobinar y cambiar el tramo insertado, y At_index está aumentando constantemente, por lo que también se necesita una variable aquí.
El usuario hace clic en el elemento de amigo en el menú para activar la devolución de llamada Elem_click. En la devolución de llamada, agregue el nombre del amigo al lapso actual usando InserHTML. Luego oculte el menú, AT_INDEX ++.
Lo anterior es escuchar Shift+@, seguido de escuchar la eliminación de Backspace.
La copia del código es la siguiente:
función getTextbeforCursor (Containerel) {
var precedingchar = "", sel, rango, precedingRange;
if (window.getSelection) {
sel = window.getSelection ();
if (sel.rangecount> 0) {
range = sel.getRanGeat (0) .clonerange ();
range.ocollapse (verdadero);
Range.setStart (Containerel, 0);
precedchar = range.cloneContents ();
}
} else if ((sel = document.selection)) {
rango = sel.createrange ();
precedingRange = range.duplicate ();
precedingRange.movetoElementText (ContainerEL);
precedingRange.setEndpoint ("EndTtarSart", rango);
precedingchar = precedingRange.htmlText;
}
return precedingchar;
}
La función de GetTextBorCursor es obtener el contenido antes del cursor. Debido a la compatibilidad, esta función puede obtener DocumentFragment que es todo el contenido antes del cursor en un navegador estándar, y en IE, solo puede obtener texto (no Nodo). Sin embargo, esta cadena HTML se puede convertir en DocumentFragment. En Avalon, se puede usar parsehtml para convertir la cadena HTML en nodo. También puede obtener el nodo usando $ (HTML) [0] en jQuery.
Con esta función, puede usar LastChild para determinar si el cursor está en el LastChild en el HTML frente al cursor, y este LastChild es un tramo.
Específico
La copia del código es la siguiente:
var a = getTextbeforCursor ($ ('editor'));
if (e.keycode == 8) {
if (!-[1,]) {
var b = avalon.parsehtml (a) .lastchild;
}demás{
var b = a.lastchild;
}
if (b.nodetype == 1 && b.nodename == 'span') {
var id = b.id;
cur_index = b.id.substring (2);
at_box_show (b.id);
}demás
$ ('at_box'). style.display = 'none';
}
Finalmente, el cursor ingresa a la etiqueta SPAN y muestra el menú. Obviamente, esto requiere vincular el evento del ratón. El mouseup está vinculado aquí, porque si MouseDown está atado, debe hacer clic en el mouse en la etiqueta del tramo nuevamente antes de que se pueda mostrar el menú. En cuanto al principio, es similar a lo anterior.
La copia del código es la siguiente:
vm.check_mouse = function (e) {
Var editor = $ ('editor'), a = getTextBeForeCursor (editor);
if (!-[1,]) {
var b = avalon.parsehtml (getTextbeForecursor (editor)). LastChild;
}demás{
var b = a.lastchild;
}
if (b! = null && b.nodetype == 1 && b.nodename == 'span') {
var id = b.id;
cur_index = b.id.substring (2);
at_box_show (b.id);
}demás
$ ('at_box'). style.display = 'none';
};
Tenga en cuenta que si el cursor está en el tramo, debe eliminarse y el AT_Box debe colocarse de acuerdo con esta ID, y también restablecer Cur_index.
En cuanto al menú de actualización de Ajax, no haré la coincidencia de personajes
Efecto
Firefox
IE8
IE7
IE6
descargar
Lo anterior es todo el contenido descrito en este artículo. Espero que sea útil para todos entender a JavaScript.