Zadávání telefonního čísla písmeny pomocí JavaScriptu

O získávání všech písmenných variant z telefonního čísla jsme již psali, tentokrát si popíšeme, jak z písmenného vyjádření získat skutečné telefonní číslo. To se hodí pro vylepšení nejrůznějších služeb pracujících s telefonním číslem. Uživatel tak může pohodlně zadávat číslo jak je zvyklý. Navíc doplníme funkci, která automaticky vyřadí neplatné znaky, takže bude možno vložit číslo z libovolného vlastního seznamu, aniž by byl problém s validací čísla, které obsahuje mezery.

Tento článek nepřináší nic převratného, ve skutečnosti jde jen o důvtipné použití principů, které jsme na Intervalu již popsali. Použitá konverze vychází z článku o převodu čísla na slovo. Možnost zadávat do textového pole vychází z článku o povoleném formátu polí formuláře. Princip konverze zadávaných písmen na čísla vychází z principu použitého pro vyhledávání v dlouhém selectboxu – stisky kláves jsou zachytávány a znaky písmen jsou převáděny na čísla. Rychlé vložení telefonního čísla z profilu uživatele umožníme pomocí autocomplete a takzvaných VCards. Uživatelům prohlížeče Internet Explorer dáme k dispozici tlačítko, kterým ihned vloží obsah schránky. Tuto funkci v ostatních prohlížečích odfiltrujeme podmíněnými komentáři. Prohlédněte si ukázku (zdrojový kód).

Formulář s obslužným skriptem:

 <form autocomplete=“on“ action=“Default.html“ method=“GET“>
  <script type=“text/javascript“ src=“ClientScripts/IntelliFields.js“></script>
  <script type=“text/javascript“>
    <!– <![CDATA[
    function charPhNum2Number(transPhNum)
    {
      var charPhNum = „ABCDEFGHIJKLMNOPQRSTUVWXYZ“;
      var numPhNum = „22233344455566677778889999“;
      var tmpPhNum = „“;
      var newPhNum = „“;
      transPhNum = transPhNum.toUpperCase();
      for(i=0;i<transPhNum.length;i++)
      {
        if (charPhNum.indexOf(transPhNum.charAt(i))!=-1)
          tmpPhNum += numPhNum.charAt(charPhNum.indexOf(transPhNum.charAt(i)));
        else
          tmpPhNum += transPhNum.charAt(i);
      }
      if (tmpPhNum.length > 0)
        for( i = 0; i < tmpPhNum.length; i++)
          if (tmpPhNum.charAt(i).match(‚[0-9]‘))
            newPhNum += tmpPhNum.charAt(i);
      return newPhNum;
    }
    function pastePhNum(fieldObj)
    {
      var newText = charPhNum2Number(window.clipboardData.getData(‚Text‘));
      if (newText.length > 0)
      {
        if (newText.length>9)
          fieldObj.value = newText.substring(newText.length-9, newText.length);
        else
          fieldObj.value = newText;
        fieldObj.fireEvent(‚onchange‘);
      }
    }
    //]]> –>
  </script>
  Telefonní číslo:<br />
  +420
  <input type=“text“ name=“txtMNumber“ id=“txtMNumber“ maxlength=“9″ size=“9″ vcard_name=“Vcard.Cellular“ onpaste=“javascript: pastePhNum(this); return false;“ title=“Telefonní číslo“ style=“margin:1px; border:1px #666666 solid;“ onkeypress=“javascript: return alfanumeric(event,0);“ onkeyup=“javascript: this.value = charPhNum2Number(this.value);“ />
  <!–[if gte IE 5]>
    <input type=“button“ title=“Vložit číslo ze schránky (clipboardu)“ onclick=“javascript: pastePhNum(this.form.txtMNumber);“ style=“font-weight:bold;“ value=“&laquo;“ />
  <![endif]–>
  <br /><br />
  <input type=“submit“ value=“Odeslat“ />
</form>

Ve formuláři je zaváděn skript z externího souboru pro filtrování nepovolených kláves, díky obsluze onkeypress budou nepovolené znaky ignorovány. Ke konverzi stisknutého písmene dojde při uvolnění klávesy obsloužením události onkeyup, kdy pole formuláře nastavíme na novou hodnotu danou výsledkem funkce charPhNum2Number. Internet Explorer navíc dovede obsloužit nestandardní událost onpaste. V tomto prohlížeči proto dojde ke konverzi i při vložení pomocí myši. Zřejmě by bylo možné dopsat i obsluhu události onclick nebo onchange a vyřešit i tento nedostatek, já jsem toto pro přehlednost vynechal. Díky atributu vcard_name může uživatel do textového pole snadno převzít údaje ze svého profilu.

V podmíněném komentáři je tlačítko, které v Internet Exploreru vloží do textového pole číslo ze schránky, přičemž při vkládání opět dojde ke konverzi a vyřazení nevhodných znaků pomocí funkce pastePhNum. Nakonec je ponecháno pouze posledních devět znaků – naše služba počítá s umožněním zadávání pouze čísel v rámci ČR, předvolba +420 je uvedena napevno, a tak uživatelé Internet Exploreru mohou vkládat číslo kliknutím na tlačítko velmi snadno.

Funkce charPhNum2Number zajišťuje konverzi písmen na číslo podle převodní tabulky, dále jsou z celého řetězce vyřazeny nevhodné znaky včetně mezer. K překladu písmena na číslo dojde při procházení řetězce v cyklu. Pokud se znak na dané pozici převedený na velké písmeno (pomocí toUpperCase() shoduje se znakem z řetězce písmen charPhNum, nahradíme ho za znak (číslo) z řetězce numPhNum. Tak jsou všechna písmena A-Z převedena na číslici. Nakonec řetězec projdeme a do výsledného řetězce zařadíme pouze znaky číslic (vyhovují definici [0-9]), ostatní znaky jsou vypuštěny.

Funkce pastePhNum slouží pro snadné vložení obsahu schránky do textového pole. Písmena v obsahu schránky nejprve překonvertujeme na číslice a ověříme, jestli jsme ze schránky vůbec něco obdrželi. Pokud ano, pak v případě, že je text kratší než devět znaků, jej přiřadíme do pole rovnou, pokud ne, odřízneme pouze posledních devět znaků. Nakonec provedeme metodou fireEvent() vyvolání události, která je obsluhována pomocí onchange – to se hodí například pro okamžitou validaci čísla skriptem na straně klienta, uživatel tak může ihned po vložení čísla tlačítkem vidět, jestli je číslo vyhovující našim podmínkám (validace v našem příkladu není řešena, příklad předpokládá nasazení schvalovacích prvků například prostřednictvím ASP.NET).

Uvedené řešení je pouze ukázkou jednoho z možných. Ne každému vyhoví možnost zadávat pouze čísla pro ČR nebo třeba do sítí všech operátorů, upravit aplikaci by však neměl být podle popisu funkcí problém. Popsaným doplňkem můžete vylepšit třeba vlastní SMS bránu, ale i jiné služby, které od uživatele vyžadují telefonní číslo.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.