jQuery restringe el cuadro de texto para ingresar solo números
JQuery restringe el cuadro de texto para ingresar solo números, que son compatibles con IE, Chrome y FF (el efecto de rendimiento es diferente). El código de muestra es el siguiente:
La copia del código es la siguiente:
$ ("Entrada"). KeyUp (function () {// Procesamiento de eventos de KeyUp
$ (this) .val ($ (this) .val (). reemplazar (// d |^0/g, ''));
}). Bind ("Paste", function () {// Ctr+V Procesamiento de eventos
$ (this) .val ($ (this) .val (). reemplazar (// d |^0/g, ''));
}). CSS ("IME-MODE", "Desactivado"); // El método de entrada de configuración CSS no está disponible
El propósito del código anterior es: solo se pueden ingresar enteros positivos mayores que 0.
La copia del código es la siguiente:
$ ("#rnumber"). keyUp (function () {
$ (this) .val ($ (this) .val (). reemplazar (/[^0-9.]/g, ''));
}). Bind ("Paste", function () {// Ctr+V Procesamiento de eventos
$ (this) .val ($ (this) .val (). reemplazar (/[^0-9.]/g, ''));
}). CSS ("IME-MODE", "Desactivado"); // El método de entrada de configuración CSS no está disponible
El propósito del código anterior es: solo se pueden ingresar 0-9 números y puntos decimales.
Encapsulate DomContentLoaded Event
La copia del código es la siguiente:
// Guardar la cola de eventos de Domready
eventQueue = [];
// juzga si el DOM ha sido cargado
iSready = false;
// juzga si Domready está obligado
isbind = falso;
/*Ejecutar domready ()
*
*@param {function}
*@ejecutar empuja el controlador de eventos a la cola de eventos y vincula domcontentloaded
* Si la carga de DOM se ha completado, ejecute inmediatamente
*@llamador
*/
función domready (fn) {
if (isReady) {
fn.call (ventana);
}
demás{
eventQueue.push (fn);
};
bindready ();
};
/*Evento DomReady Binking
*
*@param nulo
*@Ejecutar los navegadores modernos se une a DomContentLOGADO a través de AddEvlistener, incluido IE9+
IE6-8 determina si el DOM se ha cargado juzgando doscroll
*@Caller Domready ()
*/
función bindready () {
if (isReady) return;
if (isbind) return;
isbind = true;
if (window.addeventListener) {
document.adDeventListener ('DomContentLoaded', execfn, falso);
}
else if (window.attachevent) {
doscroll ();
};
};
/*Doscroll determina si el DOM de IE6-8 ha sido cargado.
*
*@param nulo
*@ejecutar doscroll determina si el DOM está cargando
*@Caller Bindready ()
*/
función doscroll () {
intentar{
document.documentelement.doscroll ('izquierda');
}
Catch (Error) {
return setTimeout (Doscroll, 20);
};
execfn ();
};
/*Cola de eventos de ejecución
*
*@param nulo
*@Ejecutar el controlador de eventos de ejecución de bucle en la cola
*@Caller Bindready ()
*/
función execfn () {
if (! isReady) {
iSready = True;
para (var i = 0; i <eventQueue.length; i ++) {
eventQueue [i] .call (ventana);
};
eventQueue = [];
};
};
// JS File 1
domready (function () {
});
// JS File 2
domready (function () {
});
// Tenga en cuenta que si se carga de forma asincrónica, no se une al método DOMREWE, de lo contrario, la función no se ejecutará.
// porque antes de la descarga de JS de carga asíncrona, DomContentLoaded ha sido disparado y el AddEventListener no se puede escuchar al ejecutar
Encapsulación simple de AJAX usando JS nativo
Primero, necesitamos el objeto XHR. Esto no es difícil para nosotros, encapsulándolo en una función.
La copia del código es la siguiente:
var createAraJax = function () {
var xhr = null;
intentar {
// navegador de la serie IE
xhr = new ActiveXObject ("Microsoft.xmlhttp");
} catch (e1) {
intentar {
// no es decir, navegador
xhr = nuevo xmlhttprequest ();
} catch (e2) {
Window.alert ("Su navegador no es compatible con AJAX, ¡reemplácelo!");
}
}
regresar xhr;
};
Entonces, escribamos la función central.
La copia del código es la siguiente:
var ajax = function (conf) {
// Inicialización
// Escriba el parámetro, opcional
var type = conf.type;
// parámetros de url, requeridos
var url = conf.url;
// El parámetro de datos es opcional, solo se requiere al solicitar POST
var data = conf.data;
// El parámetro del tipo de datos es opcional
var dataType = conf.datatype;
// La función de devolución de llamada es opcional
VAR Success = conf.success;
if (type == null) {
// El parámetro de tipo es opcional, el valor predeterminado es obtener
type = "Get";
}
if (dataType == null) {
// El parámetro del tipo de datos es opcional, predeterminado al texto
datatype = "text";
}
// Crear objeto de motor Ajax
var xhr = createAdax ();
// Abierto
xhr.open (tipo, url, verdadero);
// enviar
if (type == "get" || type == "get") {
XHR.SEND (NULL);
} else if (type == "post" || type == "post") {
XHR.SetRequestHeader ("Tipo de contenido",
"Aplicación/x-www-form-urlencoded");
XHR.SEND (datos);
}
xhr.OnreadyStateChange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (dataType == "text" || dataType == "text") {
if (éxito! = nulo) {
// texto normal
éxito (xhr.AponStext);
}
} else if (datatype == "xml" || dataType == "xml") {
if (éxito! = nulo) {
// recibir documentos XML
éxito (xhr.Responsexml);
}
} else if (dataType == "json" || dataType == "json") {
if (éxito! = nulo) {
// Convertir la cadena JSON a objeto JS
éxito (eval ("("+xhr.Arponsetext+")"));
}
}
}
};
};
Finalmente, expliquemos el uso de esta función.
La copia del código es la siguiente:
Ajax ({
Tipo: "Publicar",
URL: "test.jsp",
Datos: "Nombre = DiPoo & Info = Good",
Tipo de datos: "JSON",
éxito: function (data) {
alerta (data.name);
}
});
Solicitudes de dominio cruzado JSONP
La copia del código es la siguiente:
/**
* JavaScript JSONP Library V0.3
* Copyright (c) 2011 Snandy
* Grupo QQ: 34580561
* Fecha: 2011-04-26
*
* Aumente el manejo de fallas de solicitud. Aunque esta función no es muy útil, se estudiaron las diferencias en los scripts en cada navegador.
* 1, IE6/7/8 Evento OnreadyStateChange que admite el script
* 2, IE9/10 admite script onload y onreadystateChange eventos
* 3, Firefox/Safari/Chrome/Opera admite eventos de Script Onload
* 4, IE6/7/8/Opera no admite el evento Script OnError; IE9/10/Firefox/Safari/Chrome Supports
* 5. Aunque Opera no admite el evento OnreadyStateChange, tiene la propiedad ReadyState. Esto es muy mágico
* 6. Pruebe IE6/7/8 con IE9 e Ietester, y su ReadyState siempre se carga y se carga. No ha aparecido completo.
*
* La idea de implementación final:
* 1, IE9/Firefox/Safari/Chrome llamó con éxito el evento Onload, y la devolución de llamada de error usa el evento OnError
* 2, Opera Callets Callback también usa el evento Onload (no es compatible con OnreadyStateChange). Como no admite OnError, el procesamiento de retraso se usa aquí.
* Es decir, espere el éxito y la devolución de llamada con éxito, y la bandera bit hecha después del éxito se establece en verdadero. El fracaso no se ejecutará, de lo contrario se ejecutará.
* Es muy hábil tomar el valor de tiempo retrasado aquí. Se tarda 2 segundos antes, y no hay problema en las pruebas de la compañía. Pero después de volver a casa para usar la red inalámbrica 3G, descubrí que a pesar de que existe el archivo JS a referenciado, es
* La velocidad de Internet es demasiado lenta, el fracaso se ejecuta primero y luego el éxito. Por lo tanto, es más razonable tomar 5 segundos aquí. Por supuesto, no es absoluto.
* 3, IE6/7/8 devoluciones de llamada exitosas Use el evento OnreadyStateChange, y las devoluciones de llamada de error son casi difíciles de implementar. También es el más técnico.
* Referencia http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefor-lazy-loading-problems
* Usando NextSibling, se descubrió que no se podía implementar.
* Lo que es repugnante es que incluso si el archivo de recursos solicitado no existe. Su ReadyState también experimentará un estado "cargado". De esta manera, no puede saber si la solicitud tiene éxito o falla.
* Lo tengo miedo, así que finalmente uso el mecanismo de coordinación entre el frente y la oficina backback para resolver el problema final. Haga la devolución de llamada de solicitud (verdadera) independientemente del éxito o el fracaso.
* En este momento, la lógica que distingue el éxito y el fracaso se ha puesto en la devolución de llamada. Si el fondo no devuelve JSONP, llame a la falla, de lo contrario, llame al éxito.
*
*
* Interfaz
* Sjax.load (url, {
* Datos // Parámetros de solicitud (cadena de par de valores clave o objeto JS)
* éxito // Solicitar función de devolución de llamada exitosa
* falla // La función de devolución de llamada falló
* Alcance // Contexto de ejecución de la función de devolución de llamada
* TimeStamp // si se debe agregar una marca de tiempo
*});
*
*/
Sjax =
función (win) {
var ie678 =!-[1,],
ópera = win.opera,
doc = win.document,
head = doc.getElementsBytagName ('Head') [0],
tiempo de espera = 3000,
hecho = falso;
función _serialize (obj) {
var a = [], clave, val;
para (clave en obj) {
val = obj [clave];
if (val.constructor == array) {
para (var i = 0, len = val.length; i <len; i ++) {
a.push (key + '=' + encodeuricomponent (val [i]));
}
}demás{
a.push (key + '=' + encodeuricomponent (val));
}
}
regresar A.Join ('&');
}
solicitud de función (url, opt) {
función fn () {}
var opt = opt || {},
datos = opt.data,
éxito = Opt.Success || fn,
falla = opt.failure || fn,
alcance = opt.scope || ganar,
Timestamp = Opt.timestamp;
if (data && typeof data == 'objeto') {
data = _Serialize (datos);
}
var script = doc.createElement ('script');
Function Callback (ISSUCC) {
if (issucc) {
if (typeof jsonp! = 'undefined') {// El JSONP a la derecha de la asignación debe devolverse en segundo plano, y esta variable es una variable global
hecho = verdadero;
Success.call (Alcope, JSONP);
}demás{
falla.call (alcance);
// alerta ('ADVERTENCIA: JSONP no regresó.');
}
}demás{
falla.call (alcance);
}
// manejar la fuga de memoria en IE
script.onload = script.onerror = script.onreadyStateChange = null;
jsonp = indefinido;
if (head && script.parentnode) {
head.removechild (script);
}
}
función fixonError () {
setTimeOut (function () {
if (! ded) {
llamar de vuelta();
}
}, se acabó el tiempo);
}
if (ie678) {
script.onreadystateChange = function () {
var ReadyState = this.readyState;
if (! Done && (ReadyState == 'Loaded' || ReadyState == 'Complete')) {
devolución de llamada (verdadero);
}
}
// FixonError ();
}demás{
script.Onload = function () {
devolución de llamada (verdadero);
}
script.onerror = function () {
llamar de vuelta();
}
if (ópera) {
FixonError ();
}
}
if (data) {
url += '?' + datos;
}
if (timestamp) {
if (data) {
url += '& ts =';
}demás{
url += '? Ts ='
}
url += (nueva fecha) .GetTime ();
}
script.src = url;
head.insertbefore (script, head.firstchild);
}
return {load: request};
}(este);
El método de llamada es el siguiente:
La copia del código es la siguiente:
Sjax.load ('jsonp66.js', {
éxito: function () {alert (jsonp.name)},
falla: function () {alerta ('error');}
});
Formato del milómetro
La copia del código es la siguiente:
función toth mils (num) {
var num = (num || 0) .ToString (), resultado = '';
while (num.length> 3) {
resultado = ',' + num.slice (-3) + resultado;
num = num.slice (0, num.length - 3);
}
if (num) {resultado = num + resultado; }
resultado de retorno;
}
Los anteriores son los scripts JavaScript comúnmente utilizados compartidos por este artículo. Espero que te gusten.