JavaScript: Проблема с переключением между HTML Textarea и NiceTit
-
27-10-2019 - |
Вопрос
Я использую natedit (http://needit.com/index.php).
Я пытался создать HTML -Textarea по умолчанию, которая превращается в набивное текстовое поле, когда вы нажимаете на него. Я хочу, чтобы это вернулось к простой HTML Textarea, когда она теряет фокус. Однако я смог сделать это успешно при использовании только одной Textarea, когда я использую две странные вещи 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>
Первая Textarea, которую вы нажимаете и не сводится с работы отлично, однако, вторая Textarea, которую вы нажимаете, не будет разочаровываться при попытке не сбиться с разворотом. Что я делаю не так?
Решение
Вы не можете сделать трюк с более чем одной 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>