JavaScript: Problem beim Wechsel zwischen HTML TextArea und Nicedit
-
27-10-2019 - |
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?
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>
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>