JavaScript: Problem beim Wechsel zwischen HTML TextArea und Nicedit

StackOverflow https://stackoverflow.com/questions/4855071

Frage

Ich verwende Nicedit (http://nicedit.com/index.php).

Ich habe versucht, ein Standard -HTML -Textbereich zu erstellen, das beim Klicken darauf in ein Nicedit -Textfeld wird. Ich möchte, dass es zu einem einfachen HTML -Textbereich zurückkehrt, wenn es den Fokus verliert. Ich konnte dies jedoch erfolgreich tun, wenn ich nur einen Textbereich verwendete, wenn ich zwei Textbereichsdinge verwende (in Firefox). Ich benutze das folgende Skript:

<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript"> 

function fieldname_1()
{
   area = new nicEditor({fullPanel : true}).panelInstance('fieldname');
   area.addEvent('blur', function() 
   {
      area.removeInstance('fieldname');
      area = null;
      document.getElementById("fieldname").onclick=function(){fieldname_2()}
   });
}

function fieldname_2()
{
   area = new nicEditor({fullPanel : true}).panelInstance('fieldname');
   area.addEvent('blur', function() 
   {
      area.removeInstance('fieldname');
      area = null;
      document.getElementById("fieldname").onclick=function(){fieldname_1()}
   });
}

function fieldname2_1()
{
   area = new nicEditor({fullPanel : true}).panelInstance('fieldname2');
   area.addEvent('blur', function() 
   {
      area.removeInstance('fieldname2');
      area = null;
      document.getElementById("fieldname2").onclick=function(){fieldname2_2()}
   });
}

function fieldname2_2()
{
   area = new nicEditor({fullPanel : true}).panelInstance('fieldname2');
   area.addEvent('blur', function() 
   {
      area.removeInstance('fieldname2');
      area = null;
      document.getElementById("fieldname2").onclick=function(){fieldname2_1()}
   });
}

</script>

<TEXTAREA id="fieldname" cols="35" onclick="fieldname_1();" ></TEXTAREA>
<br><br><br>
<TEXTAREA id="fieldname2" cols="35" onclick="fieldname2_1();" >Test text</TEXTAREA>

Der erste Textbereich, den Sie klicken und nicht ausfähigen, funktioniert perfekt. Die zweite Textbereich, auf die Sie klicken, wird jedoch beim Versuch, zu unfokussiert, nicht verschwunden. Was mache ich falsch?

War es hilfreich?

Lösung

Sie können den Trick nicht mit mehr als einem Textbereich machen, was ist mit 1000?

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">

        <title></title>

        <script src = "http://js.nicedit.com/nicEdit-latest.js"></script>

        <script>
            window.onload = function () {
                var body = document.body;
                var limit = 1000;

                for (var i = 0; i < limit; i ++) {
                    var textarea = document.createElement ("textarea");
                        textarea.style.height = "100px";
                        textarea.style.width = "100%";

                    body.appendChild (textarea);
                }

                // The magic
                body.addEventListener ("click", function (event) {
                    var target = event.target;

                    if (target.nodeName === "TEXTAREA") {
                        var area = new nicEditor ({fullPanel : true}).panelInstance (target);

                        area.addEvent ("blur", function () {
                            this.removeInstance (target);
                        });
                    }
                }, false);
            }
        </script>

        <style>
            textarea {
                height: 100px;
                margin-bottom: 20px;
                width: 1000px;
            }
        </style>
    </head>

    <body>
        <!-- Create any textarea you want -->
    </body>
</html>

enter image description here

Andere Tipps

Dies tut das, was Sie wollen:

<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> 

<script type="text/javascript"> 

/*
 * Replace the textarea with the given id with an instance of niceEdit.
 * Attach an 'onblur' event to the editor that removes the niceEditor when 
 * the editor loses focus, and add the onclick function to the restored textarea
 */
function toggleEditor(id){
    new nicEditor({ fullPanel: true }).panelInstance(id).addEvent('blur', function() {
        this.removeInstance(id);
        document.getElementById(id).onclick=function(){
            toggleEditor(id)
        };
    });
};

</script>

<textarea id="fieldname" cols="35" onclick="toggleEditor(this.id);">Text text</textarea>
<br><br><br>
<textarea id="fieldname2" cols="35" onclick="toggleEditor(this.id);" >Test text</textarea>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top