Archivo

Posts Tagged ‘select’

Apuntes Javascript

La serie “Apuntes de…” sirve para documentar información que se utiliza, ya sea por recomendación o por imitación pero sin saber  demasiado bien porque, así como plasmar algunos trucos  muy interesantes, dado que la memoria es finita. (Aunque éste es el objetivo del blog..)

Obtener el dato seleccionado de una select:

<form_name>.<select_name>.options[<form_name>.<select_name>.selectedindex].value;
document.getElementById(<select_id>).options[<select_id>.selectedindex].value;

Impedir el uso del botón derecho del ratón

 document.oncontextmenu = function(){return false} document.onselectstart = function(){return false} document.ondragstart = function(){return false} 

Uso de data-* API (Propiedad HTML.dataset)
(extraído de https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)

Permite crear atributos HTML personalizados para un elemento determinado. Cada uso de data-* corresponde a una propiedad diferente. El nombre de la propiedad (data-xxx) se transforma en una key  para su acceso desde JS (y viceversa) usando las siguientes reglas:

  • el prefijo data- desaparece
  • En nombres compuestos (data-xxx-yyy) las letras minúsculas después de un guion se transforman en mayúsculas y el guión es eliminado (camelify).
  • Ejemplo: data-xxx-yyy => xxxYyy

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>

John Doe

</div>

var el = document.querySelector('#user');
//querySelector devuelve la primera coincidencia de un selector CSS (para mas de una coincidencia usar querySelectorAll(selector))

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// Crear una propiedad nueva desde JS. La propiedad 'someDataAttr' no existe en el elemento
// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';

// Ahora si existe. 'someDataAttr' in el.dataset === true
//<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth data-some-data-attr>

Categorías:Desarrollo, Javascript Etiquetas: , ,