How to sync typing between a span and an input?-CodePudding

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

CodePudding user response：

$("input#title").text() never work instead you need to use $("input#title").val() for fill it

$( "<span class='titlebox' role='textbox' contenteditable='true'></span>" ).insertAfter( "#title" );
  $("span.titlebox").bind("keyup paste", 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">