1. Tudásbázis
  2. Modulok fejlesztése
  3. Masked Input jquery?

Masked Input jquery?

Beküldte makgab - 2013. február 22. 20.25
makgab képe

Üdv!

Egy formon szeretném maszkolni az input adatokat, ahogy itt is van:
http://digitalbush.com/projects/masked-input-plugin/

Ezt hogy tudom Drupal-ba tenni, ide pl.:

<?php
$form['first_data'] = array(
'#type' =>  'textfield',
'#title' => t('First Data'),
'#description' => t('Format: 99-9999999'),
);
?>

A drupal_add_js() fv. kellene használnom, de hogyan?
Vagy van más, egyszerűbb megoldás?

Drupal verzió: 
7.x
Fórum: 
Modulok fejlesztése
aruna képe

Beküldte aruna - 2013. február 22. 22.41

http://www.drupaldeveloper.es/en/how-add-javascript-or-jquery-drupal-7

Vagy így:

- A modulod info fájl-jában hozzáadod a 'jquery.maskedinput.js' fájl-t.
- Ugyanitt egy saját javascript fájlt is hozzáadsz.
- És a saját javascript fájlban, ráaggatod az input mezőidre a javascript-et

jQuery(function($){
   $("#your-input-field-id").mask("99/99/9999");
});

- cache törlés

1
0
makgab képe

Beküldte makgab - 2013. február 23. 14.27

köszönöm, működik! :)

0
0
makgab képe

Beküldte makgab - 2013. február 23. 14.41

Bocsi, hogy JS-es a kérdés. A JS-be nem mélyedtem el még annyira. :)

Szóval lehet azt modosítani a .js-ben hogy a maszkolás ne csak fix karakterszám legyen?
Pl.:

  1. jQuery(function($){
  2.    $("#your-input-field-id").mask("99/99/9999");
  3. });

A fenti példa esetén 8 karaktert vár a maskinput. Se többet, se kevesebbet. Ilyen is kellene nekem pl.: mask("99/99/9999*")
Azaz a 8 számkarakter után bármennyi karakter állhat még.

Ez megoldható? Mit kellene a JS-ben módosítani?

0
0
aruna képe

Beküldte aruna - 2013. február 23. 15.36

karakterenként vizsgálja a szöveget, és nem egy lépésben illeszt rá egy reguláris kifejezést (a teljes mask-ot). Emiatt, könnyen lehet hogy a 'bármennyi karakter' nem adható meg a mask-ban.

Viszont van '?' opciója viszont, így minden amit a '?' után raksz a mask-ba az opcionális. A dokumentációból:

$("#phone").mask("(999) 999-9999? x99999");

Hátha ez is elég.

0
0
aruna képe

Beküldte aruna - 2013. február 23. 16.02

ha meg tudod mondani az össz, vagyi maximális karakterszámot, pl. a dátum után max. 10 karaktert akarsz beengedni, akkor így adhatod meg

mask("99/99/9999?9999999999")

Ez jó így, ha korlátozod a bevihető karakterek számát a mezőn (a fenti példában a maxlength 20 karakter).

1
0
makgab képe

Beküldte makgab - 2013. február 24. 12.46

igen, ez is működik. köszönöm.

0
0
makgab képe

Beküldte makgab - 2013. augusztus 6. 11.46

Üdv!

Nem működik a maszkolás. :(

Az .info fájlban bent van a scripts bejegyzés (jquery.maskedinput.js):

scripts[] = js/jquery.maskedinput.js
scripts[] = js/maskedinput.js

maskedinput.js:

jQuery(function($){
   $("#edit-mobile-phone").mask("+ ?99999999999999999999");
   });

A form:

  $form['mobile_phone'] = array(
  '#type' => 'textfield',
  '#title' => t('Mobile phone') . ':',
  '#size' => 150,
  '#maxlength' => 150,
  '#required' => TRUE,
  );

Az adott formon, ha megnézem az oldal forrását, akkor ott van a két js, az útvonaluk is jó. A forrásban ott van a id="edit-mobile-phone" azonosító. De mégsem maszkol. :o
Ez mitől lehet? Valamit kihagytam?

0
0
aruna képe

Beküldte aruna - 2013. augusztus 6. 21.13

A firebug-ban (is) van javascript console, ahol tudsz ilyen vagy ehhez hasonló jQuery parancsokat futtatni:

$("#edit-mobile-phone").mask("+ ?99999999999999999999");

Mivel már betöltődtek a maskedinput js fájlai (ahogy írod), én a fenti parancsot módosítgatnám a console-on, hátha nem jó.

0
0
makgab képe

Beküldte makgab - 2013. augusztus 7. 08.54

A FB console ezt írja:

TypeError: $(...).mask is not a function

$("#edit-mobile-phone").mask("+ ?99999999999999999999");

Nem egészen értem, mert ha az eredeti oldalon a "Demo" fülön ugyanezt beírom, akkor ott működik a maszkolás.

0
0
makgab képe

Beküldte makgab - 2013. augusztus 7. 09.15

Úgy tűnik korábban a "jquery.js" is ott volt - ez kell hozzá -, de most ki lett szedve valamiért és nem néztem ezt.
A lényeg, hogy működik. Pontosítom a működő kódot:
Az .info fájlban:

scripts[] = js/jquery-2.0.3.js
scripts[] = js/jquery.maskedinput.js
scripts[] = js/maskedinput.js

A jquery.maskedinput.js itt található.
A jquery-2.0.3 itt található.

A maskedinput.js (ez tartalmazza a saját maszkolásunk jquery kódját):

jQuery(function($){
   $("#edit-mobile-phone").mask("+ ?99999999999999999999");
   });

Köszönöm a segítséget!

1
0
makgab képe

Beküldte makgab - 2013. augusztus 7. 14.57

Egy érdekes dolgot azért találtam.
A corporateclean smink is használ jquery-t a slide képek animálására (banner slideshow).
Ha a fenti kód szerint használom, akkor nem működik a smink slidwshow-ja (csak főoldalon van), de csak akkor, ha be van jelentkezve a user. Ha nincs bejelentkezve a user, akkor megy a slideshow. :o

Próbáltam a modulom jquery-jét 'attached'-be tenni:

 $form['#attached']['js'][] = array(
  'data' => drupal_get_path('module', 'mymodule') . '/js/jquery-2.0.3.js',
  'type' => 'file'
);

Ebben az esetben működik a smink slideshow-ja, de a maszkolás nem. :(
Ezt az apró hibát ki lehetne valahogy küszöbölni?
(Próbáltam másik jquery verzióval is (pl. 1.10.2), de ugyanaz.)

0
0
makgab képe

Beküldte makgab - 2013. augusztus 7. 15.10

De csak akkor nem megy, ha admin-ként vagyok bejelentkezve.
Ez lehet hogy normális is...(?) :)

Azért az érdekel, hogy az 'attached'-el miért nem működik a maszkolás, csak akkor megy ha a .info fájlba teszem a jquery.js-t.

0
0
makgab képe

Beküldte makgab - 2013. augusztus 15. 23.30

Csak az archivum kedvéért: masked_input modul.

* masked_input modul telepítés (alapbeállítás jó),
* Fájl másolása ide: sites/all/libraries/maskedinput/jquery.maskedinput-1.3.js

* A saját kódban pedig használni, pl.:

libraries_get_path('maskedinput') . '/jquery.maskedinput-1.3.js';
...
$form['phone'] = array(
  '#type' => 'masked_input',
  '#mask' => '+ ?999999999999999',
...
0
0