6

Gracias a la ayuda de @fredyfx en la anterior pregunta, pude avanzar en lo que necesitaba. Ahora me encuentro ante el siguiente problema, necesito que en el id="txt" se introduzca solamente el primer nombre del usuario, para ello haría un split que detecta hasta el primer espacio en blanco ' ', como lo haría en consola, por ejemplo:

var str = 'Pepito Perez'; 

var words = str.split(' '); 
console.log(words[0]);

Esto claramente me traería "Pepito", resultado el cual debo trasladar a mi segundo input, sin éxito.

Debería llamarlo como una función string? ¿Cómo debería convertirlo de string a input?

Gracias por su ayuda.

function resizable(el, factor) {
  var int = Number(factor) || 7.7;

  function resize() {
    el.style.width = ((el.value.length + 1) * int) + 'px';
  }
  var e = 'keyup,keypress,focus,blur,change'.split(',');
  for (var i in e) el.addEventListener(e[i], resize, false);
  resize();
}
resizable(document.getElementById('txt'), 7);

function fAgrega() {
  document.getElementById("txt").value = document.getElementById("nombre").value;
  var element = document.getElementById("txt");
  resizable(element);
}
body {
  text-align: center;
  padding: 20px
}

input {
  min-width: 30px!important;
  max-width: 200px!important;
  transition: width 0.25s;
  text-align: center;
}
Ingrese su nombre: <input id="nombre" type="text" onkeyup="fAgrega();" />

<hr> ¡Hola <input id="txt" type="text" class="preview_txt"  placeholder="you" />! Nos alegra tenerte aquí de nuevo.

1 respuesta 1

6

Si te entendi bien, lo unico que necesitas es combinar los dos codigos. Quedaria algo asi:

function resizable(el, factor) {
  var int = Number(factor) || 7.7;

  function resize() {
    el.style.width = ((el.value.length + 1) * int) + 'px';
  }
  var e = 'keyup,keypress,focus,blur,change'.split(',');
  for (var i in e) el.addEventListener(e[i], resize, false);
  resize();
}
resizable(document.getElementById('txt'), 7);

function fAgrega() {
  var str = document.getElementById("nombre").value;

  var words = str.split(' ');   
  document.getElementById("txt").value = words[0];
  var element = document.getElementById("txt");
  resizable(element);
}
body {
  text-align: center;
  padding: 20px
}

input {
  min-width: 30px!important;
  max-width: 200px!important;
  transition: width 0.25s;
  text-align: center;
}
Ingrese su nombre: <input id="nombre" type="text" onkeyup="fAgrega();" />

<hr> ¡Hola <input id="txt" type="text" class="preview_txt"  placeholder="you" />! Nos alegra tenerte aquí de nuevo.

3
  • Gracias por tu respuesta! Funciona aquí en el sitio, pero al llevarlo a mi proyecto deja de hacerlo, creo que es por un tema de ID's al momento de llamar las funciones, a lo mejor si le echas un vistazo a este pequeño pen puedas orientarme un poco mejor, gracias y siento la molestia codepen.io/LauraZ956/pen/VwZPgBB
    – LauraZ
    Commented el 26 ago. 2019 a las 16:17
  • El codigo del pen no es igual que el de mi respuesta.
    – alanfcm
    Commented el 26 ago. 2019 a las 16:25
  • 1
    Lo siento, ya lo he corregido con la ayuda de la comunidad en el chat :) Tu respuesta es correcta, el error era mio. Gracias por tu ayuda!
    – LauraZ
    Commented el 26 ago. 2019 a las 16:38

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.