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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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