Nastavení hodnoty atributu WRAP v TEXTAREA JavaScriptem

Fórum › JavaScript, AJAX, jQuery

MareX0

Stálý člen

4. 12. 2007 #1

Zdravíčko, lidičky.
Má takovou textarea:

<textarea name="textArea" id="textAreaTXT" wrap="off" style="width: 600px; height: 200px; float: left; margin-right: 5px;" onKeyUp="ulozUndo();"></textarea>

Pak takový checkbox:

<input type="checkbox" name="lamaniRadku" id="zalamovatRadky" onClick="zalamaniRadku();"><label for="zalamovatRadky"> zalamovat řádky</label>

A takovouhle funkci zalamaniRadku():

function zalamaniRadku() {

  if (document.getElementById('zalamovatRadky').checked == true) {

    document.getElementById('textAreaTXT').setAttribute('wrap', 'soft');

  } else {

    document.getElementById('textAreaTXT').setAttribute('wrap', 'off');

  }

}

Bohužel to funguje jen v IE (ve Firefoxu a Opeře ne).
Zkoušel jsem tu funkci napsat i takto:

function zalamaniRadku() {

  if (document.getElementById('zalamovatRadky').checked == true) {

    document.getElementById('textAreaTXT').wrap = 'soft';

  } else {

    document.getElementById('textAreaTXT').wrap = 'off';

  }

}

Opět funguje jen v IE :(

Poradí mi někdo, jak to mám udělat, aby to fungovalo i ve Firefoxu a Opeře?

Díky

Nahlásit jako SPAM

IP: 85.160.96.–

Prog.0

Věrný člen

5. 12. 2007 #2

Už som sa s tým stretol, už ani nepamätám, či ide o bug, alebo skôr o to, že wrap vyhodili z html a zabudli ho šupnúť do css, v skratke, ak niekto vie lepší postup ako tento, tak ma poteší.

Princíp je asi taký že ak fyzicky naťukáš <textarea wrap="off"> tak to funguje. Problém je len, že to nejde prehadzovať javascriptom. Ide ale vytvoriť dve textarea objekty a prehadzovať im style.display=none...

<html><head>

  

<script type="text/javascript">



  var wrap_switch = function(wrap,id)

  {

    var to_hide = document.getElementById(id+'_'+(wrap ? 'nowrap' : 'wrap'));

    var to_show = document.getElementById(id+'_'+(wrap ? 'wrap' : 'nowrap'));



    to_show.value         = to_hide.value;

    to_hide.style.display = 'none';

    to_show.style.display = '';

  }



</script>



</head><body>



<label><input type="checkbox" id="switch" onclick="wrap_switch(this.checked,'mytxt')" /> Wrap</label>



<textarea id="mytxt_nowrap" wrap="off" rows="10" cols="50"></textarea>

<textarea id="mytxt_wrap"              rows="10" cols="50" style="display:none"></textarea>



</body></html>

Nevýhoda je asi taká, že sa tým stráca pozícia kurzora, označený text a scrolovanie... Vo firefoxe sa to však dá vyriešiť, no neviem ako je na tom opera.

Nahlásit jako SPAM

IP: 213.160.186.–

Prog.

MareX0

Stálý člen

5. 12. 2007 #3

Díky, když to jinak nejde, tak to udělám takhle, ale mohl bys mi ještě poradit s tím, aby teda zůstal v té přepnuté textarea označený stejný text jako v té předchozí (pokud nějaký byl) nebo kurzor zůstal na stejné pozici v textu. S tím si sám asi neporadím, JavaScript není bohužel zrovna moje parketa :)

Nahlásit jako SPAM

IP: 85.160.105.–

Petroff0

Věrný člen

5. 12. 2007 #4

Mám dotaz: pokud kliknu na checkbox a pak do textarey, nezlikviduju si tím stejně vybraný text i pozici kursoru?

Nahlásit jako SPAM

IP: 89.102.211.–

Prog.0

Věrný člen

6. 12. 2007 #5

To Petroff : Áno :-) Ale ak sa prepínaš tabulátorom, tak nie.

To MareX :
Keď si vo firefoxe otvoríš DOM inspector a otvoríš si v ňom nejaký textarea object, tak uvidiš properties:

selectionStart, selectionEnd - pozicia kurzora a označenia
ak je selectionStart == selectionEnd, tak nie je nič označené.
ak je selectionStart=1, selectionEnd =2 => oznaceny je druhy znak...

scrollLeft, scrollTop - scrolovanie zlava, a zhora (v pixeloch)
ak su rovne 0, znamena ze je zobrazena oblast celkom vlavo, celkom hore

scrollWidth, scrollHeight - celkova velkost plochy, na ktorej je text (v px)
clientWidth, clientHeight - velkost plochy, ktora je naraz viditelna (v px)

cize

scrollLeft sa pohybuje od 0 do (scrollWidth - clientWidth)
scrollHeight sa pohybuje od 0 do (scrollHeight - clientHeight)

Teraz pri prepnutí treba skopírovať ich hodnoty. Problém ešte je, že scrollovanie by sa zachovať nemalo, t.j. keď iba sckopíruješ scrollTop, tak to asi dobré nebude. Chcelo by to nejaké vyratávanie relatívnej pozície kurzora v texte a potom približný scroll. Ale presné to asi nikdy nebude.
Hej a fungovať to bude asi iba vo ff. Neviem, možno aj v opere, alebo v opere trocha inak... V IE sa na to celé vykašli a jednoducho použi property wrap.

Nahlásit jako SPAM

IP: 213.160.186.–

Prog.

Petroff0

Věrný člen

6. 12. 2007 #6

Nyní funguje LABEL i v IE6.
Zkuste hledat bugy - nějaké se najdou. [testováno v IE6/7 FF2]
Nevíte proč v IE použití LABELu zachová kursor ale výběr zruší ?

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title> Emulace textarey s ovládáným WRAP attributem </title>

<!--[if IE]>

<script type="text/javascript">

 var wrap_switch = function(wrap,id) {

 var el=document.getElementById(id+"_nowrap");

 el.wrap=wrap ? 'soft' : 'off';

 el.focus();

 }

</script>

<![endif]-->

<!--[if !IE]> -->

<script type="text/javascript">

var set_Selection = function (elem, from) {

            if(from.selectionStart) {

            var selectionStart = from.selectionStart;

            var selectionEnd = from.selectionEnd;

                elem.focus();

                elem.setSelectionRange(selectionStart,selectionEnd);

            }

            else elem.focus();

}

 var wrap_switch = function(wrap,id) {

    var to_hide = document.getElementById(id+'_'+(wrap ? 'nowrap' : 'wrap'));

    var to_show = document.getElementById(id+'_'+(wrap ? 'wrap' : 'nowrap'));

    to_hide.style.display = '';

    to_show.style.display = '';

    to_show.value = to_hide.value;

    set_Selection(to_show,to_hide);

    to_hide.style.display = 'none';

    to_show.style.display = '';

}

</script>

<!-- <![endif]-->

</head>

<body>

<label for="switch">

<input type="checkbox" id="switch" onclick="wrap_switch(this.checked,'mytxt')" /> Wrap

</label>

<textarea id="mytxt_nowrap" wrap="off" rows="10" cols="50"></textarea>

<textarea id="mytxt_wrap"              rows="10" cols="50" style="display:none"></textarea>

</body>

</html>

Nahlásit jako SPAM

IP: 89.102.211.–

Petroff0

Věrný člen

6. 12. 2007 #7

Opět se setkávám s bugem fóra PROGRAMUJTE.COM.
(byl ve staré verzi, je bohužel i v nové - o chybujícím JS v prohlížeči IE, který měl být opraven ani nemluvě)
Zkrátka určité formulářové prvky v [C0DE] tagu způsobí needitovatelnost příspěvku.

Chtěl jsem jen připsat, že tato dvojTEXTAREová koncepce vyžaduje ještě funkci pro přístup k obsahu - musí se vložit v provedení jak pro IE tak pro FF:

/**** do IE části ******/

var getText=function(id,idSwitch) {

return document.getElementById(id+"_nowrap").value;

}



/**** do nonIE části ******/

var getText=function(id,idSwitch) {

var wrap=document.getElementById(idSwitch).checked;

return document.getElementById(id+'_'+(wrap ? 'wrap' : 'nowrap')).value;

}

Nahlásit jako SPAM

IP: 89.102.211.–

Prog.0

Věrný člen

6. 12. 2007 #8

To Petroff : nj, teraz som si všimol, že ie odfajči selection už pri onblur (opustení objektu), takže by sa to tiež malo nejako ošetriť...

ad b) Možno by to chcelo nadefinovať viac, než len pristup k obsahu,... a skončili by sme niekde pri nejakom všeobecnom kóde, ktorý by opravil všetky nedostatky objektu textarea... Ja som chcel len načrtnúť princíp ;-)

Nahlásit jako SPAM

IP: 213.160.186.–

Prog.

← Zpět na seznam vláken ← Zpět do Fóra