@jacksonavila/phone-lib 2.0.8 → 2.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -6
- package/package.json +1 -1
- package/phone-lib.cdn.js +3 -3
- package/phone-lib.js +64 -3
package/README.md
CHANGED
|
@@ -13,6 +13,7 @@ Librería JavaScript moderna para integrar fácilmente un input de teléfono con
|
|
|
13
13
|
|
|
14
14
|
- ✅ **Country dropdown** / **Dropdown de países** showing name, ISO2 code, dial code, and flag
|
|
15
15
|
- ✅ **Tel input** / **Input tipo tel** with automatic formatting based on selected country
|
|
16
|
+
- ✅ **Numbers only input** / **Input solo números** - automatically filters non-numeric characters
|
|
16
17
|
- ✅ **Phone number validation** / **Validación de números** using `libphonenumber-js`
|
|
17
18
|
- ✅ **Complete public API** / **API pública completa** with methods to get number information
|
|
18
19
|
- ✅ **Vanilla JavaScript and React support** / **Soporte para Vanilla JavaScript y React**
|
|
@@ -61,7 +62,7 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
|
|
|
61
62
|
<!DOCTYPE html>
|
|
62
63
|
<html>
|
|
63
64
|
<head>
|
|
64
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.
|
|
65
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.9/phone-lib.css">
|
|
65
66
|
</head>
|
|
66
67
|
<body>
|
|
67
68
|
<div id="phone-container"></div>
|
|
@@ -69,7 +70,7 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
|
|
|
69
70
|
<script type="importmap">
|
|
70
71
|
{
|
|
71
72
|
"imports": {
|
|
72
|
-
"@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.
|
|
73
|
+
"@jacksonavila/phone-lib": "https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.9/phone-lib.js",
|
|
73
74
|
"libphonenumber-js": "https://esm.sh/libphonenumber-js@1.11.0"
|
|
74
75
|
}
|
|
75
76
|
}
|
|
@@ -89,8 +90,8 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
|
|
|
89
90
|
```
|
|
90
91
|
|
|
91
92
|
**CDN URLs / URLs de CDN:**
|
|
92
|
-
- **jsDelivr:** `https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.
|
|
93
|
-
- **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.
|
|
93
|
+
- **jsDelivr:** `https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.9/`
|
|
94
|
+
- **unpkg:** `https://unpkg.com/@jacksonavila/phone-lib@2.0.9/`
|
|
94
95
|
|
|
95
96
|
### Method 2: Script Tag (All Browsers) / Método 2: Script Tag (Todos los Navegadores)
|
|
96
97
|
|
|
@@ -98,12 +99,12 @@ You can use PhoneLib directly from CDN without npm / Puedes usar PhoneLib direct
|
|
|
98
99
|
<!DOCTYPE html>
|
|
99
100
|
<html>
|
|
100
101
|
<head>
|
|
101
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.
|
|
102
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.9/phone-lib.css">
|
|
102
103
|
</head>
|
|
103
104
|
<body>
|
|
104
105
|
<div id="phone-container"></div>
|
|
105
106
|
|
|
106
|
-
<script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.
|
|
107
|
+
<script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.9/phone-lib.cdn.js"></script>
|
|
107
108
|
|
|
108
109
|
<script>
|
|
109
110
|
let phoneLib = null;
|
package/package.json
CHANGED
package/phone-lib.cdn.js
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* Carga libphonenumber-js dinámicamente y expone PhoneLib globalmente
|
|
5
5
|
*
|
|
6
6
|
* Uso:
|
|
7
|
-
* <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.
|
|
8
|
-
* <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.
|
|
7
|
+
* <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.9/phone-lib.css">
|
|
8
|
+
* <script src="https://cdn.jsdelivr.net/npm/@jacksonavila/phone-lib@2.0.9/phone-lib.cdn.js"></script>
|
|
9
9
|
* <script>
|
|
10
10
|
* document.addEventListener('phoneLibReady', () => {
|
|
11
11
|
* const phoneLib = new PhoneLib('#container', {...});
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
'use strict';
|
|
18
18
|
|
|
19
19
|
// Versión del paquete (actualizar cuando se publique nueva versión)
|
|
20
|
-
const PACKAGE_VERSION = '2.0.
|
|
20
|
+
const PACKAGE_VERSION = '2.0.9';
|
|
21
21
|
const PACKAGE_NAME = '@jacksonavila/phone-lib';
|
|
22
22
|
|
|
23
23
|
// URLs de CDN
|
package/phone-lib.js
CHANGED
|
@@ -895,11 +895,65 @@ class PhoneLib {
|
|
|
895
895
|
|
|
896
896
|
// Input de teléfono
|
|
897
897
|
if (this.phoneInput) {
|
|
898
|
+
// Handler para prevenir entrada de caracteres no numéricos
|
|
899
|
+
this._boundHandlers.phoneKeyDown = (e) => {
|
|
900
|
+
if (this.isDisabled || this.isReadonly) return;
|
|
901
|
+
|
|
902
|
+
// Permitir teclas especiales (Backspace, Delete, Arrow keys, Tab, etc.)
|
|
903
|
+
const allowedKeys = [
|
|
904
|
+
'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
|
|
905
|
+
'Home', 'End', 'Tab', 'Escape', 'Enter'
|
|
906
|
+
];
|
|
907
|
+
|
|
908
|
+
// Permitir Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
|
|
909
|
+
if (e.ctrlKey || e.metaKey) {
|
|
910
|
+
if (['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())) {
|
|
911
|
+
return; // Permitir
|
|
912
|
+
}
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
// Si es una tecla permitida, dejar pasar
|
|
916
|
+
if (allowedKeys.includes(e.key)) {
|
|
917
|
+
return;
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
// Permitir números (0-9)
|
|
921
|
+
if (e.key >= '0' && e.key <= '9') {
|
|
922
|
+
return;
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
// Permitir + solo al inicio del input
|
|
926
|
+
if (e.key === '+') {
|
|
927
|
+
const currentValue = e.target.value;
|
|
928
|
+
const selectionStart = e.target.selectionStart;
|
|
929
|
+
// Solo permitir + si está al inicio o si no hay ningún carácter antes de la posición del cursor
|
|
930
|
+
if (selectionStart === 0 || currentValue.substring(0, selectionStart).trim() === '') {
|
|
931
|
+
return;
|
|
932
|
+
}
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
// Si llegamos aquí, prevenir la entrada
|
|
936
|
+
e.preventDefault();
|
|
937
|
+
};
|
|
938
|
+
|
|
898
939
|
this._boundHandlers.phoneInput = (e) => {
|
|
899
940
|
if (this.isDisabled || this.isReadonly) return;
|
|
900
941
|
|
|
901
942
|
// Obtener el valor actual del input
|
|
902
|
-
|
|
943
|
+
let inputValue = e.target.value;
|
|
944
|
+
|
|
945
|
+
// Filtrar caracteres no numéricos (permitir números y +)
|
|
946
|
+
// Remover cualquier carácter que no sea número o +
|
|
947
|
+
inputValue = inputValue.replace(/[^0-9+]/g, '');
|
|
948
|
+
|
|
949
|
+
// Si el valor cambió después de filtrar, actualizar el input
|
|
950
|
+
if (inputValue !== e.target.value) {
|
|
951
|
+
const cursorPosition = e.target.selectionStart;
|
|
952
|
+
e.target.value = inputValue;
|
|
953
|
+
// Restaurar posición del cursor (ajustada por caracteres removidos)
|
|
954
|
+
const newPosition = Math.min(cursorPosition, inputValue.length);
|
|
955
|
+
e.target.setSelectionRange(newPosition, newPosition);
|
|
956
|
+
}
|
|
903
957
|
|
|
904
958
|
// Procesar el input
|
|
905
959
|
this.handlePhoneInput(inputValue);
|
|
@@ -921,6 +975,7 @@ class PhoneLib {
|
|
|
921
975
|
this.emitEvent('blur', { phoneNumber: this.phoneNumber, isValid });
|
|
922
976
|
};
|
|
923
977
|
|
|
978
|
+
this.phoneInput.addEventListener('keydown', this._boundHandlers.phoneKeyDown);
|
|
924
979
|
this.phoneInput.addEventListener('input', this._boundHandlers.phoneInput);
|
|
925
980
|
this.phoneInput.addEventListener('focus', this._boundHandlers.phoneFocus);
|
|
926
981
|
this.phoneInput.addEventListener('blur', this._boundHandlers.phoneBlur);
|
|
@@ -954,6 +1009,9 @@ class PhoneLib {
|
|
|
954
1009
|
|
|
955
1010
|
// Remover listeners del input
|
|
956
1011
|
if (this.phoneInput && this._boundHandlers) {
|
|
1012
|
+
if (this._boundHandlers.phoneKeyDown) {
|
|
1013
|
+
this.phoneInput.removeEventListener('keydown', this._boundHandlers.phoneKeyDown);
|
|
1014
|
+
}
|
|
957
1015
|
if (this._boundHandlers.phoneInput) {
|
|
958
1016
|
this.phoneInput.removeEventListener('input', this._boundHandlers.phoneInput);
|
|
959
1017
|
}
|
|
@@ -1501,9 +1559,12 @@ class PhoneLib {
|
|
|
1501
1559
|
return;
|
|
1502
1560
|
}
|
|
1503
1561
|
|
|
1504
|
-
|
|
1562
|
+
// Filtrar caracteres no numéricos (permitir números y +)
|
|
1563
|
+
const filteredNumber = typeof number === 'string' ? number.replace(/[^0-9+]/g, '') : (number || '').toString().replace(/[^0-9+]/g, '');
|
|
1564
|
+
|
|
1565
|
+
this.phoneNumber = filteredNumber;
|
|
1505
1566
|
if (this.phoneInput) {
|
|
1506
|
-
this.phoneInput.value =
|
|
1567
|
+
this.phoneInput.value = filteredNumber;
|
|
1507
1568
|
}
|
|
1508
1569
|
this.updatePhoneNumber();
|
|
1509
1570
|
|