如何在跨度和输入之间同步输入？

Question

我正在制作一种我找到的在跨度和输入之间同步输入的新方法（“https://Whosebug。com/questions/8803416/synchonise-2-input-fields-can-it-be-done-using-jquery”）并且它有效，但我遇到了一个问题。

我想做的是使用经典编辑器在 WordPress 中创建一个 multi-line 标题，并且输入要求在 value="" 中设置任何输入的文本。如下所示：

<input type="text" name="post_title" size="30" value="" id="title" spellcheck="true" autocomplete="off">

那么如何在 span 和 input 之间同步输入但文本在 value="" 中？

这是我到目前为止完成的代码（是的，代码有效，在调试模式下查看它，您会看到文本显示在输入的末尾）：

$("<span class='titlebox' role='textbox' contenteditable='true'></span>").insertAfter("#title");

$("span.titlebox").bind("keyup paste", function() {
  $("input#title").text($(this).text());
});

.titlebox {
  ont-size: 2.7em;
  letter-spacing: -0.5px;
  font-weight: 600;
  display: block;
  width: 100%;
  overflow: hidden;
  resize: none;
  word-wrap: break-word;
  border: 1px solid #000
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="post_title" size="30" value="" id="title" spellcheck="true" autocomplete="off">

Answer 1

$("input#title").text() 永远行不通。相反，您需要使用 $("input#title").val() 来填充它。

$("<span class='titlebox' role='textbox' contenteditable='true'></span>").insertAfter("#title");

$("span.titlebox").on("input", function() {
  $("input#title").val($(this).text());
});

.titlebox {
  ont-size: 2.7em;
  letter-spacing: -0.5px;
  font-weight: 600;
  display: block;
  width: 100%;
  overflow: hidden;
  resize: none;
  word-wrap: break-word;
  border: 1px solid #000
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="post_title" size="30" value="" id="title" spellcheck="true" autocomplete="off">

如何在跨度和输入之间同步输入？

How to sync typing between a span and an input?

javascript

jquery

wordpress-theming