Eventos de selección HTML. Controlador para el evento onChange del objeto Seleccionar

la lista puede ser con la capacidad de seleccionar solo una opción o varias opciones.

Cada contenedor está asociado con un objeto de la clase Select y cada contenedor secundario está asociado con un objeto de la clase Option, que es una propiedad. de este objeto clase Seleccionar. Además, una propiedad de un objeto Select también es una colección de opciones que agrupa todos sus objetos Option secundarios. Enumeremos las principales propiedades, métodos y eventos que caracterizan a estos objetos.

Seleccionar objeto Propiedades Métodos Controladores de eventos

opciones tamaño longitud múltiple índice seleccionado	enfocar() difuminar() agregar() eliminar()	onBlur onChange onFocus

Objeto de opción Propiedades Métodos Eventos

defaultSelected valor de texto de índice seleccionado	No	No

No describiremos todas las propiedades, métodos y eventos de estos dos objetos. Detengámonos en formas típicas utilizando sus combinaciones.

Crear objetos de opción

El objeto de clase Option es interesante porque, a diferencia de muchos otros integrados en el DOM Objetos JavaScript, tiene un constructor. Esto significa que el programador puede crear él mismo un objeto de clase Opción:

opt = nueva opción ([texto, [valor, [seleccionado por defecto, [seleccionado]]]]);

donde los argumentos corresponden a las propiedades de los objetos normales de la clase Opción:

• texto: una línea de texto que se coloca en el contenedor (por ejemplo: texto);
• valor: el valor que se pasa al servidor al seleccionar una alternativa asociada con un objeto de opción;
• defaultSelected: si esta alternativa está seleccionada de forma predeterminada (verdadero/falso);
• seleccionado: la alternativa fue seleccionada por el usuario (verdadero/falso).

A primera vista, no está muy claro por qué un programador podría necesitar un objeto de este tipo, ya que es imposible crear un objeto de la clase Select y, por lo tanto, es imposible asignarle un nuevo objeto de Opción. Todo está explicado a la hora de cambiar la lista de alternativas para un objeto Select en el documento. Esto se puede hacer y cambiar la lista de Seleccionar alternativas no implica reformatear el documento. Cambiar la lista de alternativas permite solucionar el problema de crear menús anidados que no existen en formularios HTML mediante programación menú regular(opciones).

Al programar alternativas, se debe prestar atención al hecho de que los objetos de la clase Opción no tienen la propiedad de nombre, debido a que el contenedor no tiene atributo NOMBRE. Por lo tanto, solo se puede acceder a los objetos de opción incrustados en un documento como miembros de la colección de opciones.

Opciones de colección

Las opciones integradas de matriz (colección) son una de las propiedades del objeto Seleccionar. Los elementos de esta matriz son objetos completos de la clase Opción. Se crean cuando el navegador carga la página. El número de objetos Option contenidos en el objeto document.f.s de la clase Select se puede encontrar usando propiedad estándar matriz: document.fsoptions. longitud. Además, el objeto Select en sí tiene la misma propiedad: document.f.s. longitud: es completamente idéntico al anterior.

El programador tiene la oportunidad no sólo de crear nuevos objetos de Opción, sino también de eliminar objetos ya creados por el navegador:

Primera opción Segunda opción Tercera opción 5.3.

Eliminando opciones de SELECT EN en este ejemplo A la hora de cargar una página desde el servidor, tenemos tres alternativas. Estos se pueden ver como una lista desplegable de opciones. Después de hacer clic en el botón "Eliminar"última opción

"Sólo quedan dos alternativas en el formulario. Si vuelve a hacer clic en este botón, sólo quedará una alternativa. Al final, no quedará ninguna opción, es decir, el usuario perderá la oportunidad de elegir. Cuando se pulsa el botón de reinicio Al hacer clic, las opciones no se restauran: las alternativas se pierden sin dejar rastro.

Ahora, usando el constructor de opciones, podemos hacer que el proceso sea reversible:

función RestoreOptions() ( document.f.s.options = nueva Opción("Opción uno","",true,true); document.f.s.options = nueva Opción("Opción dos"); document.f.s.options = nueva Opción("Opción tres"); return false; ) Primera opción Segunda opción Tercera opción 5.4. Eliminar y agregar opciones de SELECT Colocamos la restauración de alternativas en el controlador de eventos onReset del contenedor FORM. Objetos creados de la clase Option asignamos al objeto document.f.s de la clase Select. En este caso, la primera alternativa debe seleccionarse de forma predeterminada (el argumento defaultSelected se establece en verdadero) para simular el comportamiento cuando

oreja

páginas.

Las propiedades de texto y valor del objeto Opción.

La propiedad de texto representa el texto que se muestra en el menú que corresponde a la alternativa. En el código HTML se encuentra entre las etiquetas y. La propiedad de valor contiene el valor del atributo VALOR de la etiqueta. Por ejemplo, digamos que una de las opciones de la lista se describe como: Opción uno el objeto correspondiente tendrá "Opción uno" y la propiedad de valor tendrá "n1".

Surge la pregunta, ¿por qué se necesitan dos propiedades? El hecho es que el valor de la opción seleccionada se transfiere al servidor. En el caso de que el contenedor no tenga un atributo VALOR, el valor de texto se envía al servidor.selectedIndex devolverá el índice de la primera opción seleccionada. En este caso, existe una alternativa: la propiedad seleccionada en cada objeto Opción. es cierto si esta opción está seleccionado, y false en caso contrario. A continuación se dará un ejemplo.

Entrenador de animales eventos onChange Seleccionar objeto

El evento Cambiar ocurre cuando el usuario cambia su elección de opciones. Si el campo es un campo de selección de opción única, entonces todo es simple; vea el ejemplo anterior. Veamos qué sucede cuando tratamos con un campo de opción múltiple:

Frutas: manzana plátano kiwi melocotón
Puestos seleccionados: 5.5. controlador de cambio al elegir múltiples opciones

Tenga en cuenta que el evento Cambiar ocurre cuando el usuario selecciona o anula la selección de una opción. La excepción es cuando las opciones se marcan secuencialmente durante la selección (hacer clic con el botón del mouse en un elemento, mover el mouse al elemento final, soltar el botón del mouse). En este caso, el evento ocurre en el momento en que el usuario suelta el botón del mouse y todas las alternativas marcadas quedan seleccionadas.

Propiedades seleccionadas y seleccionadas.

Las propiedades de texto y valor del objeto Opción.

La propiedad de texto representa el texto que se muestra en el menú que corresponde a la alternativa. En el código HTML se encuentra entre las etiquetas y. La propiedad de valor contiene el valor del atributo VALOR de la etiqueta. Por ejemplo, digamos que una de las opciones de la lista se describe como:

Opción uno

Entonces el valor de la propiedad de texto del objeto correspondiente será igual a "Opción uno", y el valor de la propiedad de valor será igual a "n1".

Surge la pregunta, ¿por qué se necesitan dos propiedades? El hecho es que el valor de la opción seleccionada se transfiere al servidor. Si el contenedor no tiene el atributo VALOR, el valor del texto se envía al servidor.

La propiedad selectedIndex del objeto Select devuelve el número de la opción seleccionada (la numeración comienza desde cero).

Opción: OneTwoChoose índice:

Observe que en el controlador de eventos onChange estamos haciendo referencia al segundo elemento del formulario. En en este momento no está definido, pero el evento solo ocurrirá cuando seleccionemos una opción; en ese momento el campo ya estará definido.

Si la lista de opciones se proporciona como , es decir con la capacidad de seleccionar varias opciones a la vez, la propiedad selectedIndex devolverá el índice de la primera opción seleccionada. En este caso, existe una alternativa: la propiedad seleccionada de cada objeto Opción. Es verdadero si se selecciona esta opción, falso en caso contrario. A continuación se dará un ejemplo.

El evento Cambiar ocurre cuando el usuario cambia su elección de opciones. Si el campo es un campo de selección de opción única, entonces todo es simple; vea el ejemplo anterior. Veamos qué sucede cuando tratamos con un campo de opción múltiple:

Frutas: latas de manzana, vipeach.
Artículos seleccionados:

Ejemplo 5.5. Controlador onChange al seleccionar múltiples opciones (html, txt)

Tenga en cuenta que el evento Cambiar ocurre cuando el usuario selecciona o anula la selección de una opción. La excepción es cuando las opciones se marcan secuencialmente durante la selección (hacer clic con el botón del mouse en un elemento, mover el mouse al elemento final, soltar el botón del mouse). En este caso, el evento ocurre cuando el usuario suelta el botón del mouse y todas las alternativas marcadas quedan seleccionadas.

Establece un controlador de selección de texto dentro del elemento o activa este evento. este evento sólo puede ocurrir en elementos y. El método tiene tres casos de uso:

controlador(eventObject): una función que se establecerá como controlador. Cuando la llamen recibirá objeto de evento objeto de evento.

controlador (eventObject) - ver arriba.
eventData: datos adicionales pasados ​​al controlador. Deben estar representados por un objeto en el formato: (fName1:value1, fName2:value2, ...) .

Puede eliminar un controlador instalado utilizando el método desatar().

Las tres opciones para usar el método son análogas a otros métodos (ver arriba), por lo que todos los detalles usando seleccionar() se puede encontrar en las descripciones de estos métodos.

Al seleccionar texto con el mouse, los navegadores activan un evento de selección cuando se completa la selección. Si la selección ocurre presionando las teclas ← → ↓ mientras mantiene presionada la tecla Mayús, entonces el evento ocurrirá cada vez que se suelte la tecla de flecha.

Para obtener la parte seleccionada del texto en diferentes navegadores requerido diferentes medios. En Firefox y Google Chrome la parte seleccionada será proporcionada por el método window.getSelection() o document.getSelection(), mientras que IE y Opera proporcionarán el texto deseado al llamar al método document.selection.createRange(). La versión para varios navegadores se verá así:

función Texto seleccionado() ( if (window.getSelection) txt = window.getSelection().toString(); else if (document.getSelection) txt = document.getSelection(); else if (document.selection) txt = document.selection .createRange().texto;devolver txt)

Tenga en cuenta que la función selectedText() no solo funcionará para y , sino que devolverá el texto seleccionado sin importar en qué elemento se encuentre.

Ejemplo

// instala un controlador de eventos de selección para el elemento con identificador foo $("#foo" ).select (function () (alert ("Dentro del elemento foo, el usuario ha seleccionado el texto." ); ) );