Vylepšení práce s textem pro SMS bránu v JavaScriptu

V současnosti vznikají jak nejrůznější sponzorované SMS brány, tak i soukromé SMS brány v intranetech firem – v článku si ukážeme, jak pomocí několika doplňků můžeme uživatelům zvýšit komfort takové brány.

Ať už používáte vlastní SMS bránu nebo třeba SW dodávaný operátorem (například SMS Connect od T-Mobile), obyčejně je uživateli k dispozici pro odeslání zprávy jen strohé textové pole. V dnešním článku si práci s textem vylepšíme – usnadníme vkládání a kopírování zpráv, odstraňování diakritiky a doplníme funkci pro kompresi zprávy. Kompresí nazývám způsob psaní zprávy zvláště oblíbený u teenagerů pro úsporu místa, kdy se text píše bez mezer a každé počáteční písmeno ve slově se napíše velkým písmenem. Text zůstává dobře čitelný a přitom se ušetří několik znaků, takže obsah sdělení může být delší. Jako opakování pro začátečníky doplníme vkládání smajlíků kliknutím. Prohlédněte si ukázku (zdrojový kód).

Nejprve probereme kód formuláře:

<script language=“javascript“ type=“text/javascript“>
<!–
function Smile(xsmile,field)
{
  field.value=field.value+xsmile;
  field.focus();
}
// –>
</script>
<form name=“smsform“ id=“smsform“ action=“#“ method=“POST“>
<table>
<tr>
<td align=“center“>
  <img onclick=“Smile(‚:))) ‚,document.forms.smsform.text)“ src=“smileys/15.gif“ alt=““ style=“width:15px;height:15px;border:0px“ />
  <img onclick=“Smile(‚:) ‚,document.forms.smsform.text)“ src=“smileys/3.gif“ alt=““ style=“width:15px;height:15px;border:0px“ />
  <img onclick=“Smile(‚;) ‚,document.forms.smsform.text)“ src=“smileys/4.gif“ alt=““ style=“width:15px;height:15px;border:0px“ />
  <img onclick=“Smile(‚%] ‚,document.forms.smsform.text)“ src=“smileys/17.gif“ alt=““ style=“width:16px;height:16px;border:0px“ />
  <img onclick=“Smile(‚:( ‚,document.forms.smsform.text)“ src=“smileys/8.gif“ alt=““ style=“width:15px;height:15px;border:0px“ />
  <img onclick=“Smile(‚:´( ‚,document.forms.smsform.text)“ src=“smileys/9.gif“ alt=““ style=“width:15px;height:15px;border:0px“ />
  <img onclick=“Smile(‚:o((( ‚,document.forms.smsform.text)“ src=“smileys/10.gif“ alt=““ style=“width:15px;height:15px;border:0px“ />
  <br />
  <textarea onkeypress=“return safechars(event)“ onafterupdate=“if (this.form.aNoDiac.checked) noDiacritic(this);“ onblur=“if (this.form.aNoDiac.checked) noDiacritic(this);“ onmousemove=“if (this.form.aNoDiac.checked) noDiacritic(this);“ onkeyup=“if (this.form.aNoDiac.checked) noDiacritic(this);“ onfocus=“if (this.form.aNoDiac.checked) noDiacritic(this);“ onchange=“if (this.form.aNoDiac.checked) noDiacritic(this);“ name=“text“ id=“text“ rows=“6″ wrap=“virtual“ cols=“30″ style=“font-weight:bold;font-family:System“></textarea>
  <br />
  <input type=“checkbox“ id=“aNoDiac“ name=“aNoDiac“ value=“1″ checked=“checked“ /> automaticky odstraňovat diakritiku
  <br />
  <input type=“button“ title=“Převede text zprávy na malá písmena“ onclick=“this.form.text.value=this.form.text.value.toLowerCase()“ value=“Malá“ />
  <input type=“button“ title=“Převede text zprávy na velká písmena“ onclick=“this.form.text.value=this.form.text.value.toUpperCase()“ value=“Velká“ />
  <input type=“button“ title=“Odstraní z textu diakritické znaky, které by nemusely být v přijaté zprávě zobrazeny korektně“ onclick=“noDiacritic(this.form.text)“  value=“Diakritika“ />
  <input type=“button“ title=“Zkrátí délku zprávy odstraněním mezer v textu – písmeno následující za mezerou bude převedeno na velké a usnadní tak čtení zprávy“ onclick=“compressMessage(this.form.text)“ value=“Komprese“ />
  <br />
  <!–[if gte IE 5]>
  <input type=“button“ title=“Vloží do textového pole text ze schránky“ onclick=“document.forms[0].text.select();document.execCommand(‚Paste‘)“ value=“Vložit“ />
  <input type=“button“ title=“Zkopíruje celý text do schránky, potom jej můžete vložit kamkoli příkazem Vložit nebo stiskem CTRL-C“ onclick=“document.forms[0].text.select(); document.execCommand(‚Copy‘)“ value=“Kopírovat“ />
  <![endif]–>
  <input type=“button“ value=“Smazat“ onclick=“this.form.text.value=“;“ />
  <input type=“submit“ value=“Odeslat“ />
</td>
</tr>
</table>
</form>

Formulář obsahuje řadu smajlíků, které jsou obsluhovány krátkým skriptem. Na onclick se vezme hodnota (value) textového pole, přidá se k němu kód tvořící smajlíka a výsledek se nastaví jako nová hodnota textového pole. Smajlík se tak kliknutím přidá na konec textu obdobně jako v DHTML editoru.

Textové pole je ošetřeno proti zadávání nevhodných znaků z klávesnice, některé znaky do pole prostě nelze napsat, klávesnice nereaguje. Toto chování je zapříčiněno funkcí safechars, která je volána vždy při události onkeypress. Pro detailnější vysvětlení funkce odkazuji na článek Povolený formát formulářového pole.

Ve formuláři dále vidíme tlačítka, která umožňují jediným kliknutím převést celý obsah pole na velká nebo malá písmena. Vezme se hodnota textového pole, použije se metoda toLowerCase() pro malá písmena nebo toUpperCase() pro velká písmena a výsledek se nastaví jako nová hodnota textového pole.

Ve formuláři máme ještě tlačítka pro vkládání textu ze schránky a pro zkopírování odesílané zprávy do schránky (viz článek JavaScript a data ve schránce), tyto funkce však pracují pouze v prohlížeči Internet Explorer, proto jsou v ostatních prohlížečích odfiltrovány takzvanými podmíněným komentáři.

Ještě si všimněte, že vymazání pole není řešeno přes input type=“Reset“. Je tomu tak proto, že u takovéhoto rozhraní budeme možná chtít přepočítávat počet napsaných znaků a tato funkce se nám lépe naváže na JavaScriptem provedenou obsluhu tlačítka, kdy se na onclick hodnota textového pole nastaví na prázdný řetězec. Komu to vyhovuje lépe, může samozřejmě použít zmíněné klasické resetování formuláře.

Další využívané funkce jsou vyjmuty do externího souboru TextFunctions.js:

var Diacritic = „áäčďéěíĺľňóôőöŕšťúůűüýřžÁÄČĎÉĚÍĹĽŇÓÔŐÖŔŠŤÚŮŰÜÝŘŽ“;
var DiacRemoved = „aacdeeillnoooorstuuuuyrzAACDEEILLNOOOORSTUUUUYRZ“;
function noDiacritic(field)
{
  var ptext=““; // pomocná proměnná
  var text=field.value; // hodnota textového pole, kterou budeme procházet
  for(i=0;i<text.length;i++)
  {// projít zadaný text po znaku
    if (Diacritic.indexOf(text.charAt(i))!=-1) // pokud je znak v textu obsažen v řetezci Diacritic
      ptext+=DiacRemoved.charAt(Diacritic.indexOf(text.charAt(i))); // předat do pomocného řetězce znak z pole DiacRemoved
    else
      ptext+=text.charAt(i); // jinak předat původní znak
  }
  field.value=ptext; // nastavit pomocný řetězec jako novou hodnotu textového pole
}
function compressMessage(field)
{
  var tx=““; // pomocná proměnná
  var text=field.value; // hodnota textového pole, kterou budeme procházet
  for(p=0;p<text.length;p++)
  {// projít zadaný text po znaku
    if (text.charAt(p) == “ „)
    { // pokud je znak mezera
      p++; // zvýšit index znaku, tj. přeskočit mezeru
      tx+= text.charAt(p).toUpperCase(); // do pomocného řetězce předat znak převedený na velké písmeno
    }
    else
      if (p == 0) // pokud jde o počáteční písmeno, převést na velké písmeno
        tx+= text.charAt(p).toUpperCase();
      else // jinak předat znak jak je
        tx+= text.charAt(p);
  }
  field.value=tx; // nastavit řetězec jako novou hodnotu textového pole
}

Princip je, myslím, dostatečně jasný z komentářů, funkce jsou z našeho formuláře volány tlačítky na událost onclick. Důležité je, že jsou obsluhovány také události v poli textarea. Díky tomu je možné automaticky odstraňovat diakritiku již v průběhu toho, jak uživatel píše nebo vkládá zprávu ze schránky. Testován je stav zatrhávacího tlačítka, pokud není zatrženo (checked), funkce provádějící automatickou konverzi se neprovádí. Pro začátečníky může být v tomto příkladu zajímavé také použití zástupky this pro přístup k objektům formuláře, naopak u prvků, které nejsou součásti objektového modelu formuláře (například obrázky smajlíků), je nutné vypisovat celou cestu k prvku v dokumentu.

Pro skutečně funkční bránu je potřeba upravit formulář tak, aby spolupracoval s vaším softwérem – nastavit action formuláře a případně upravit jméno textového pole.

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

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