Problems with summernote

Question

Problems with summernote

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm new to programming and I need help I want that when I select one of the names I put it in the position where the cursor is located

<select>selecionar dato</select>
<option value="Emmanuel">Emmanuel</option>
<option value="Cristina">Cristina</option>
<option value="Alicia">Alicia</option>
<option value="Esjani">Esjani</option>

<textarea>
    mucho gusto mi nombre es: (aquí puede estar el cursor) Lorem ipsum dolor sit amet, consectetur adipisicing elit.(aquí puede estar el cursor) Dolore ipsa molestiae nemo tempore nesciunt, quos obcaecati repellendus sequi dolores exercitationem quisquam voluptatibus porro tempora quis aperiam nobis eum dignissimos,(aquí puede estar el cursor)
</textarea>

javascript jquery html5

asked by Emmanuel 07.11.2018 в 00:39

source

2 answers

USERS WITH ROLES how do the elements of a list go from one function to another?

score 0 · Answer 1

What you must do is first capture the position of the cursor before losing the focus on your input and store it in a hidden for example. Then when selecting an option in your select, we must take the text it contains and insert that value in the previously saved position. Finally we return the focus to continue writing without having to resort to the use of the mouse. Greetings!

Example:

function insertValue(value){
let pos = document.getElementById("ultimaPosicion").value;
 
var textoActual = document.getElementById("input").value;
var textoInsertar = value;
var position = pos;

var output = [textoActual.slice(0, position), textoInsertar, textoActual.slice(position)].join('');

document.getElementById("input").value = output;
document.getElementById("input").focus();
}
function savePos(pos){
document.getElementById("ultimaPosicion").value = pos;
}

textarea{width:100%}

<select onChange="insertValue(this.value)">
<option>selecionar dato...</option>
<option value="Emmanuel">Emmanuel</option>
<option value="Cristina">Cristina</option>
<option value="Alicia">Alicia</option>
<option value="Esjani">Esjani</option>
</select>

<textarea id="input" onblur="savePos(this.selectionEnd)"></textarea>
<input type="hidden" id="ultimaPosicion" value="0">

score 0 · Answer 2

I would use a addEventListener that triggers a function when a% new_co% is selected

Add a new option with the text 'Select one', so the first time your option will appear empty

In your textArea create the function js with a variable where you include all the text of the textArea and concatenate it with nuevoTexto , it will contain the value of the option every time you select a new one. At the end you do a return of the 'textArea.textContent with the new text. The css is only to make the textArea bigger;)

Greetings

var textArea = document.querySelector('textArea'); 
var option  = document.querySelector('select');

function nuevoTexto () {
  var newTextContent = 'mucho gusto mi nombre es: ' + option.value + ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' + option.value + ' Dolore ipsa molestiae nemo tempore nesciunt, quos obcaecati repellendus sequi dolores exercitationem quisquam voluptatibus porro tempora quis aperiam nobis eum dignissimos, ' + option.value;
  return textArea.textContent = newTextContent;
}

option.addEventListener('change', nuevoTexto, false)

textArea{
width: 100%;
height: 100px;
}

<br>
<select>
    <option value="null">Selecciona uno</option>
    <option value="Emmanuel">Emmanuel</option>
    <option value="Cristina">Cristina</option>
    <option value="Alicia">Alicia</option>
    <option value="Esjani">Esjani</option>
</select>
<br>
<textarea>
</textarea>