Get div's value to insert to textarea js

Question

I have a div behaving as a textarea where I can insert text. I want to mirror value as user typing in this div, to a second textarea in order to be formatted and to send to DB consequently. However, I seem to be having trouble taking div's value. It worked smoothly as I had a regular textarea. Here I used .text() instead of .val() but it doesn't add br. It is supposed to add br as user start a new line.

https://jsfiddle.net/u7mh431k/

$('#fake_textarea').keyup(function(){

  var val = $('#fake_textarea').text();

  val = val.replace(/\n/g, '<br />\n')

  $('#second').val(val);
});

   
.textbox {
-moz-appearance: textfield-multiline;
      -webkit-appearance: textarea;
      border: 1px solid gray;
      font: medium -moz-fixed;
      font: -webkit-small-control;
      height: 28px;
      overflow: auto;
      padding: 2px;
      resize: both;
      width: 200px;
      min-height: 50px;
}

textarea {
  width: 200px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textbox" id="fake_textarea" contenteditable></div>
<textarea type="text" id="second"></textarea>

What's the problem? The addition of `
` during jump rope seems to be intended and it seems to work without any problems. Do you want something without `
`? — lowfront, Sep 25 '21 at 06:49
DIVs don't have focus. Your problem was already soilved here: https://stackoverflow.com/questions/6633248/how-to-grab-keyboard-events-on-an-element-which-doesnt-accept-focus — pkolawa, Sep 25 '21 at 06:51
Also check the documentation for [`.val()`](https://api.jquery.com/val/#val()) - it is not an alternative to `.text`. — traktor, Sep 25 '21 at 06:53
I want to sync data from a “fake textarea” where user types text, when press enter add
to a regular textarea. Now no data is being inserted as I type anything in my div. — asmsngusr, Sep 25 '21 at 06:54
Does this answer your question? [Get value of div content using jquery](https://stackoverflow.com/questions/19581683/get-value-of-div-content-using-jquery) — traktor, Sep 25 '21 at 06:54
it works when I have regular textarea, but does not work with div — asmsngusr, Sep 25 '21 at 06:59
Learning jQuery instead of Javascript has been a bad idea since 2015. — connexo, Sep 25 '21 at 08:24

lowfront · Accepted Answer · 2021-09-25T08:52:40.863

1

When using contenteditable, the child element is created in html element, so you have to parse it and change it to text. The appropriate property at this time is textContent.

$('#fake_textarea').on('input', function(){
  var val = $('#fake_textarea')
    .contents()
    .map((_,el)=> el.textContent + '<br/>\n')
    .toArray()
    .join('');
 
  $('#second').val(val);
});

edited Sep 25 '21 at 08:52

answered Sep 25 '21 at 07:44

lowfront

639
1
5

Using the `keyup` event is not the most clever approach, as it will also uselessly copy the contents as soon as your press modifier keys like Shift or cursor keys. Use `input` instead. – connexo Sep 25 '21 at 08:20
@connexo That's right. I'll change it to an input event. – lowfront Sep 25 '21 at 08:52

connexo · Answer 2 · 2021-09-25T08:18:16.097

Easy using vanilla JS.

The text you enter in your divis internally wrapped into sub-div elements. Just connect those subdivs' textContentwith a newline character, and assign it to the textarea's textContent.

fake_textarea.addEventListener('input', (e) => {
  second.textContent = [...fake_textarea.querySelectorAll('div:not(.textbox)')].map(e => e.textContent).join('\n')
})

.textbox {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 200px;
  min-height: 50px;
}

textarea {
  width: 200px;
  height: 50px;
}

<div class="textbox" id="fake_textarea" contenteditable></div>
<textarea type="text" id="second"></textarea>

Get div's value to insert to textarea js

2 Answers2