键入内容时，如何将<textarea>的内容添加到<div contenteditable =“ true”>？

问题描述

我正在使用JavaScript library，当用户键入罗马字符时将其转换为日语字符。不过，它仅适用于input和textarea元素。

由于我需要使用户能够通过execCommand()设置键入文字的样式，并且该方法不适用于input或textarea元素，因此我尝试提出解决方法。它的工作方式如下：

1. 用户开始在contenteditable div中输入一些英文文本。
2. 当他决定开始用日语键入文字时，将按下AltGr键，这会将焦点移至进行字符转换的隐藏textarea上。
3. 当用户在不知不觉中键入此文本区域时，他正在键入的文本将显示在contenteditable div中，随时可以按用户希望的样式进行设置。

稍后，我仍然有很多问题要解决。但是，到目前为止，我正在努力获得这项工作的基础。

我现在可以输入textarea，并且键入的字符显示在contenteditable中。但是我不想逐个字符地导入。我想准确导入textarea所显示的日语字符。

我不知道该如何实现，通过更改/添加我的代码，或通过更改我正在使用的JS library上的代码，任何帮助将不胜感激（也是如此）对于像我这样的初学者来说，即使是复杂的语言也无法理解），从而使其可以用于inputs或textareas以外的元素。

这是我的代码：

JSFiddle

/* Makes the character conversion work on the "hidden" textarea: */
wanakana.bind(document.getElementById("hidden"));

/* Makes the selected text bold: */
function boldText() {
  document.execCommand("bold");
}

/* Switch the focus from the Contenteditable div to the "hidden" textarea by pressing the AltGr key:  */
function switchToHidden () {
  document.getElementById("hidden").focus();
}

/* Switch the focus from the "hidden" textarea to the Contenteditable div by pressing the AltGr key:  */
function switchToOriginal () {
  document.getElementById("original").focus();
}

/* Makes the inputted characters typed in the textarea show up in the contenteditable div: */
$(".hidden").on('input',function(event) {
  $('.original').append(event.originalEvent.data);
});

body {
  padding: 20px !important;
}

body,textarea,div {
  font-family: Arial,Helvetica,sans-serif;
  padding: 5px;
  margin: 0;
}

div {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  overflow-y: scroll;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

textarea {
  width: 300px;
  height: 100px;
  border: solid 1px #000;
  resize: none;
  overflow-y: scroll;
  opacity: 0.2;
}

li {
  line-height: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- JS Library that does the character conversion from Roman to Japanese characters: -->
<script src="https://unpkg.com/wanakana"></script>

<button type="button" onclick="boldText();">Click here to make the selected text <b>bold</b></button><br>

<p>Contenteditable Div (this is where the user will type,most of the time)</p>
<div id="original" class="original" contenteditable autofocus onKeyDown="if(event.keyCode==18) switchToHidden();"></div><br>

<p>Hidden Textarea (this will be used to handle the character conversion)</p>
<textarea id="hidden" class="hidden" onKeyDown="if(event.keyCode==18) switchToOriginal();"></textarea><br><br>

<p>How to test:</p>
<ol>
  <li>Type something in the contenteditable div. Notice that you are typing Roman characters.</li>
  <li>Press the AltGr key and notice how the focus shifts to the textarea.</li>
  <li>Type something like "karaoke" and notice how the text gets converted in the textarea.</li>
  <li>Notice that the word you just typed also shows in the contenteditable div,but in the original Roman characters you used,not the Japanese ones (this is the problem).</li>
</ol>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）