Nastavení hodnoty atributu WRAP v TEXTAREA JavaScriptem – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Nastavení hodnoty atributu WRAP v TEXTAREA JavaScriptem – JavaScript, AJAX, jQuery – Fórum – Programujte.comNastavení hodnoty atributu WRAP v TEXTAREA JavaScriptem – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
MareX0
Stálý člen
4. 12. 2007   #1
-
0
-

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.–
Reklama
Reklama
Prog.0
Věrný člen
5. 12. 2007   #2
-
0
-

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
-
0
-

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
-
0
-

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
-
0
-

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
-
0
-

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
-
0
-

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
-
0
-

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.
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 36 hostů

Podobná vlákna

Wrap v textarea — založil dalaman

Gridview word-wrap — založil Janus

Stylování atributu title — založil michal

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý