Discussion:
Tekstikentän javascript-editointitoiminnot
(too old to reply)
Otto J. Makela
2010-03-23 15:34:32 UTC
Permalink
Osaako joku nimetä valmista javascript-ratkaisua, jolla saadaan
kauniin selainriippumattomasti toteutettua yksinkertainen "lisää tämä
teksti/merkki" -toiminne www-sivun tekstieditointikenttään?
Siis likimain sama joka löytyy Wikipedian tekstieditorissa.

Ratkaisu vaikuttaa olevan yllättävän selainriippuvainen, sillä olen
katsellut muutaman verkosta löytyvän ratkaisun, ja kaikki kohdalle
osuneet ovat toimineet vajavaisesti uudehkolla Firefoxilla.

Esimerkiksi tämä lisää Firefoxilla tekstiä aina perään, aivan kuten
phpBB-webfoorumeilla käytetty vastaava toiminne:
http://codingforums.com/showthread.php?t=1452
--
/* * * Otto J. Makela <***@iki.fi> * * * * * * * * * * * * * * * */
/* Phone: +358 40 765 5772, FAX: +358 42 7655772, ICBM: 60N 25E */
/* Mail: Mechelininkatu 26 B 27, FI-00100 Helsinki, FINLAND */
/* * * Computers Rule 01001111 01001011 * * * * * * * * * * * * */
Jukka K. Korpela
2010-03-23 17:23:59 UTC
Permalink
Post by Otto J. Makela
Osaako joku nimetä valmista javascript-ratkaisua, jolla saadaan
kauniin selainriippumattomasti toteutettua yksinkertainen "lisää tämä
teksti/merkki" -toiminne www-sivun tekstieditointikenttään?
Tavallisesti se on tehty niin, että lisätty teksti tai merkki menee kentän
loppuun. Tämä on aika helppo juttu, mutta ilmeisesti haet sellaista (sinänsä
paljon loogisempaa) toimintoa, että lisäys menee kohdistimen eli kursorin
osoittamaan kohtaan.
Post by Otto J. Makela
Ratkaisu vaikuttaa olevan yllättävän selainriippuvainen, sillä olen
katsellut muutaman verkosta löytyvän ratkaisun, ja kaikki kohdalle
osuneet ovat toimineet vajavaisesti uudehkolla Firefoxilla.
Kohdistimeen liittyvät operaatiot voivat olla vähän hankalia tehdä
selainriippumattomasti.
Post by Otto J. Makela
Esimerkiksi tämä lisää Firefoxilla tekstiä aina perään, aivan kuten
http://codingforums.com/showthread.php?t=1452
Hm... tuo ohjautuu HTTP redirectillä osoitteeseen
http://codingforums.com/showthread.php?t=1437
jossa käsitellään ihan muun asian tekemistä Javalla (ei siis
JavaScriptillä). Web-foorumien URLit taitavat yleisesti olla sellaisia, että
ne toimivat ihan miten sattuu.

Googlailu tyyliin
javascript insert character textarea
johdatti sivulle
http://www.webmasterworld.com/forum91/4686.htm
jolla oleva koodi näyttäisi toimivan, kunhan merkit ¦¦ korjataan merkeiksi
||. Pitipä tämäkin vielä eläessään nähdä: katkopystyviiva käytössä. (Syynä
on kyllä varmaankin koodikonversiovirhe.) Ja ai niin,
<!--and now the test html--//>
pitää myös korjata esimerkiksi poistamalla kyseinen roska (comments
considered harmful, etenkin kun niissä niin usein tehdään muotovirheitä).

Koodi ei ole erityisen tyylikästä mutta ei tyhmän näköistäkään. Ei
esimerkiksi yritetä haistella selainta jostakin tunnistemerkkijonosta, vaan
testataan ominaisuuksien olemassaoloa eli olennaisesti DOM-tuen luonnetta.

Testasin seuraavilla: Firefox 3.5.8, Opera 10.10, IE 8, Safari 4.0.4, Google
Chrome 4.1. Alustana Windows Vista.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Otto J. Makela
2010-03-23 17:41:16 UTC
Permalink
Post by Jukka K. Korpela
Post by Otto J. Makela
Esimerkiksi tämä lisää Firefoxilla tekstiä aina perään, aivan kuten
http://codingforums.com/showthread.php?t=1452
Hm... tuo ohjautuu HTTP redirectillä osoitteeseen
http://codingforums.com/showthread.php?t=1437
jossa käsitellään ihan muun asian tekemistä Javalla (ei siis
JavaScriptillä). Web-foorumien URLit taitavat yleisesti olla
sellaisia, että ne toimivat ihan miten sattuu.
Pahoittelen, copy-paste -häiriö iski. Piti siis olla:

http://codingforums.com/showthread.php?t=145203
--
/* * * Otto J. Makela <***@iki.fi> * * * * * * * * * * * * * * * */
/* Phone: +358 40 765 5772, FAX: +358 42 7655772, ICBM: 60N 25E */
/* Mail: Mechelininkatu 26 B 27, FI-00100 Helsinki, FINLAND */
/* * * Computers Rule 01001111 01001011 * * * * * * * * * * * * */
Otto J. Makela
2010-03-23 17:54:48 UTC
Permalink
Post by Jukka K. Korpela
Post by Otto J. Makela
Esimerkiksi tämä lisää Firefoxilla tekstiä aina perään, aivan
http://codingforums.com/showthread.php?t=1452
Hm... tuo ohjautuu HTTP redirectillä osoitteeseen
http://codingforums.com/showthread.php?t=1437
jossa käsitellään ihan muun asian tekemistä Javalla (ei siis
JavaScriptillä). Web-foorumien URLit taitavat yleisesti olla
sellaisia, että ne toimivat ihan miten sattuu.
Pahoittelen, jonkinlainen copy-paste -häiriö iski. Piti siis olla:
http://codingforums.com/showthread.php?t=145203

Ja kas kummaa, tuossa minun aiemmin löytämässäni koodissa oli vain
yksi virhe tuohon nähden, mutta se riitti :-)

Lopputulos on kuitenkin että kursori siirtyy aina loppuun tekstin...
Sijainti pitäisi varmaan jotenkin tallettaa ja palauttaa ennalleen?
--
/* * * Otto J. Makela <***@iki.fi> * * * * * * * * * * * * * * * */
/* Phone: +358 40 765 5772, FAX: +358 42 7655772, ICBM: 60N 25E */
/* Mail: Mechelininkatu 26 B 27, FI-00100 Helsinki, FINLAND */
/* * * Computers Rule 01001111 01001011 * * * * * * * * * * * * */
OV
2010-03-25 08:40:04 UTC
Permalink
Post by Jukka K. Korpela
Post by Otto J. Makela
Osaako joku nimetä valmista javascript-ratkaisua, jolla saadaan
kauniin selainriippumattomasti toteutettua yksinkertainen "lisää tämä
teksti/merkki" -toiminne www-sivun tekstieditointikenttään?
Tavallisesti se on tehty niin, että lisätty teksti tai merkki menee
kentän loppuun. Tämä on aika helppo juttu, mutta ilmeisesti haet
sellaista (sinänsä paljon loogisempaa) toimintoa, että lisäys menee
kohdistimen eli kursorin osoittamaan kohtaan.
Post by Otto J. Makela
Ratkaisu vaikuttaa olevan yllättävän selainriippuvainen, sillä olen
katsellut muutaman verkosta löytyvän ratkaisun, ja kaikki kohdalle
osuneet ovat toimineet vajavaisesti uudehkolla Firefoxilla.
Kohdistimeen liittyvät operaatiot voivat olla vähän hankalia tehdä
selainriippumattomasti.
dokuwikin (www.dokuwiki.org) editori tekee tuon aika nätisti. Eri
tyylien muokkaus laittaa oikeat muokkausmerkit nätisti kohdilleen. jos
on selectoituna tekstiä, niin laittaa valitun ympärille. jos ei, niin
laittaa jonkun oletustekstin.

Jos tätä hait..

t. OV

Loading...