How to sync typing between a span and an input?

Question

I'm making a new I found way to sync typing between a span and an input ("https://stackoverflow.com/questions/8803416/synchonise-2-input-fields-can-it-be-done-using-jquery") and it works but I've come across a problem.

What I'm trying to do is create a multi-line title in WordPress using the classic editor and the input requires any text entered to be set in value="". It looks like this below:

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

So how do I sync typing between a span and an input but text is in value=""?

This is the code I've done so far (yes the code works, look at it in debug mode and you'll see the text showing up at the end of the input):

$("<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">

score 1 · Accepted Answer · edited May 23 '22 at 07:17

$("input#title").text() never works. Instead you need to use $("input#title").val() to fill it.

$("<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?

1 Answers1