0

Hola quiero agregar texto desde un select a un textarea en la parte donde quedo el cursor, pero solo logro que se inserte al comienzo del textarea y no donde esta el cursor

$(document).ready(function(){
			
		$('#txtAreaPreviewMensaje').focus(function(){
			var campo=$('#txtAreaPreviewMensaje').val();
			$('#longMensaje').text(campo.length);
		}); 
		$('#txtAreaPreviewMensaje').keydown(function(){
			var campo=$('#txtAreaPreviewMensaje').val();
			$('#longMensaje').text(campo.length);
		});
		$( '#txtAreaPreviewMensaje' ).keyup(function() {
  			var campo=$('#txtAreaPreviewMensaje').val();
			$('#longMensaje').text(campo.length);
		});
		$('#selecccionar').change(function(){
			var value=$('#selecccionar').val();
			if(value===''||value===null){

			}else{
				var pos = $("#ultimaPosicion").val();	
				var textoActual = $("#txtAreaPreviewMensaje").val();
				var textoInsertar = value;
				var position = pos;
				var output = [textoActual.slice(0, position), textoInsertar, textoActual.slice(position)].join('');
				$("#txtAreaPreviewMensaje").val(output);
				$("#txtAreaPreviewMensaje").focus();
			}
		});		
		/*function posicion(pos){
			$('ultimaPosicion').val(pos);
		}*/
		$('#txtAreaPreviewMensaje').blur(function(){
			var end = $('#txtAreaPreviewMensaje').prop('selectionEnd');
			$('ultimaPosicion').val(end);
		});
		});
<html> 
<head> 
	<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	
</head> 
<body> 	
	<select id="selecccionar">
		<option value="">selecionar dato...</option>
		<option value="Emmanuel">Emmanuel</option>
		<option value="Cristina">Cristina</option>
		<option value="Alicia">Alicia</option>
		<option value="Esjani">Esjani</option>
	</select>
	<br>	
	<br>			
	<textarea  id="txtAreaPreviewMensaje" name="mensaje" wrap=physical cols="28" rows="4" ></textarea> 
	<p id="longMensaje"><p> 	
	<br>
	<br>
	<input type="hidden" id="ultimaPosicion" value="0">	
</body> 
</htm>

2 respuestas 2

1

Un ejemplo (sin necesidad de jQuery) de como insertar texto en la posición del cursor

var campo = document.getElementById('campo');
var boton = document.getElementById('boton');
var insertar = 'hola';

boton.addEventListener('click', e => {
  var inicio = campo.selectionStart;
  var fin = campo.selectionEnd;
  var texto = campo.value;
  campo.value = texto.slice(0, inicio) + insertar + texto.slice(fin);
  campo.selectionStart = campo.selectionEnd = inicio + insertar.length;
  campo.focus();
});
<textarea id="campo">0123456789</textarea>
<button id="boton">Insertar</button>

0

Buen día colega! Creo que ese código esta un poco desorganizado, pero atendiendo a tu consulta te dejo esta solución. Fíjate en la parte del output... Use template literals para resolver el asunto. Espero te resulte útil!

$(document).ready(function () {

    $('#txtAreaPreviewMensaje').focus(function () {
        var campo = $('#txtAreaPreviewMensaje').val();
        $('#longMensaje').text(campo.length);
    });
    $('#txtAreaPreviewMensaje').keydown(function () {
        var campo = $('#txtAreaPreviewMensaje').val();
        $('#longMensaje').text(campo.length);
    });
    $('#txtAreaPreviewMensaje').keyup(function () {
        var campo = $('#txtAreaPreviewMensaje').val();
        $('#longMensaje').text(campo.length);
    });
    $('#selecccionar').change(function () {
        var value = $('#selecccionar').val();
        if (value === '' || value === null) {
            return;
        } else {
            var pos = $("#ultimaPosicion").val();
            var textoActual = $("#txtAreaPreviewMensaje").val();
            var textoInsertar = value;
            var output = `${textoActual} ${textoInsertar}`;
            $("#txtAreaPreviewMensaje").val(output);
            $("#txtAreaPreviewMensaje").focus();
        }
    });
    /*function posicion(pos){
        $('ultimaPosicion').val(pos);
    }*/
    $('#txtAreaPreviewMensaje').blur(function () {
        var end = $('#txtAreaPreviewMensaje').prop('selectionEnd');
        $('ultimaPosicion').val(end);
    });
});
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
    <select id="selecccionar">
    <option value="">selecionar dato...</option>
    <option value="Emmanuel">Emmanuel</option>
    <option value="Cristina">Cristina</option>
    <option value="Alicia">Alicia</option>
    <option value="Esjani">Esjani</option>
    </select>
    <br>
    <br>
    <textarea id="txtAreaPreviewMensaje" name="mensaje" wrap=physical cols="28" rows="4"></textarea>
    <p id="longMensaje">
    </p>
    <br>
    <br>
    <input type="hidden" id="ultimaPosicion" value="0">

    <script src="index.js"></script>
</body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.