JavaScript:HTML Textareaとnicetitの切り替えの問題
-
27-10-2019 - |
質問
nicet(http://nicet.com/index.php)を使用しています。
私は、クリックすると、NICEDITテキストフィールドに変わるデフォルトのHTML Textareaを作成しようとしています。フォーカスを失ったら、単純なHTML Textareaに戻したいと思います。ただし、1つのTextareaを使用するときにこれをうまく行うことができましたが、2つのTextareasを使用すると、奇妙なことが起こります(Firefoxで)。次のスクリプトを使用します。
<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>
クリックして最初のテキストアレアは完全に動作しますが、クリックする2番目のTextareaは、焦点を合わせようとしようとするときに消滅しません。私は何が間違っているのですか?
解決
1つ以上のTextareaでトリックを行うことはできません。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>
他のヒント
これはあなたが望むことをします:
<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>
所属していません StackOverflow