Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    posizione cursore in un iframe editabile

    ciao a tutti,
    ho un piccolo problema. all'interno di un iframe editabile, ogni volta che entra in gioco una piccola funzione che ho fatto per formattare determinate parole, il cursore del mouse mi torna all'inizio dell'iframe. come si può evitare questo effetto "indesiderato"?
    se può servire, posto il codice:

    <html>
    <head>
    <style type="text/css">
    #mioIframe {
    border: 3px solid #CCCCCC;
    width: 400px;
    height: 300px;
    }
    </style>
    <script type="text/javascript">

    function evidenziatore(){

    var area = document.getElementById("mioIframe");
    var testo = area.contentWindow.document.body.innerHTML;

    var temp = new Array();
    temp = testo.split(' ');
    var trovato = false;

    //RICERCA
    for (i=0; i<temp.length; i++)
    {
    if (temp[i] == "ciao")
    {
    //alert("trovato ciao");
    temp[i] = "CIAO";
    trovato = true;
    }

    }
    //SOSTITUZIONE
    if (trovato)
    {
    var finale = "";
    for (i=0; i<temp.length; i++)
    {
    finale = finale + temp[i] + " ";
    }

    area.contentWindow.document.body.innerHTML = finale;
    }

    }

    function premi(){
    var editor = document.getElementById("mioIframe");
    editor.contentDocument.designMode = "on";
    iFrameDoc = document.getElementById("mioIframe").contentWindow .document;
    iFrameDoc.addEventListener("keyup", evidenziatore, true);
    }

    </script>
    </head>
    <body>

    <iframe id="mioIframe" onload="premi();" width="300" height="300"></iframe>

    </body>
    </html>

  2. #2
    nulla di nulla ?

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    prova inserendo il codice sotto riportato dopo che fai l'innerHtml:

    codice:
    var range = area.contentDocument.createRange();
    range.setStart(area.contentDocument.body.lastChild, 1);
    var selection = area.contentWindow.getSelection();
    selection.addRange(range);
    Lo sai vero che non funzionerà mai su tutti i browser?

  4. #4
    Innanzitutto grazie mille per la risposta. Hai ragione, questo trucchetto funziona soltanto su Chrome e Safari (anche se in entrambi, prima che la parola scelta diventi grassetta, devo premere spazio due volte anzichè una sola). Su Firefox non funziona, mentre su Explorer (quello di cui avrei effettivamente bisogno) l'iframe non mi viene neanche riconosciuto editabile...

    Non è che per caso hai qualche suggerimento da darmi? Magari utilizzando altre tecniche, con i div editabili invece degli iframe o in qualche altro modo?

  5. #5
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Secondo me il modo migliore per ovviare a questo problema è quello di utilizzare le funzioni native per il Rich-Text Editing, che sono supportate da tutti i browser. Altrimenti ti tocca fare un lavoro madornale con le espressioni regolari&hellip;

    Qui hai una guida: https://developer.mozilla.org/en/Ric...ing_in_Mozilla
    Qui hai un esempio: http://forum.html.it/forum/showthrea...7#post13383847


  6. #6
    Grazie, anche se sinceramente l'esempio mi sembra un po' lungo e complesso!
    Speravo fosse un tantino più semplice la situazione

    Comunque darò un'occhiata sperando di capirci qualcosa... del resto se mi dici che è la strada più sicura per tutti i browser varrà la pena provarci.

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    puoi tentare di "tradurre" il codice utilizzando qualche framework, di solito i framework permettono una compatibilità con tutti i browser(cosi non ti devi fare tu gli sbattimenti per rendere il codice cross-browser), non ho mai provato però a fare una cosa del genere con qualche framework quindi non posso assicurarti nulla.

  8. #8
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    ho trovato questo dovrebbe fare al caso tuo...

    http://plugins.jquery.com/project/designMode

    è un plugin del framework jquery, supporta i browser:

    Internet Explorer 6+
    Firefox 1.5+
    Safari 1.3+
    Opera 9+

    meglio di cosi...

  9. #9
    grazie mille! sembra perfetto...
    ti faccio sapere

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.