Home / Questions / 288245
Accepted
LauraZ
Asked: 2020-08-27 07:32:59 +0800 CST 2020-08-27 07:32:59 +0800 CST

Problem creating split JS on text input

  • 772

Thanks to the help of @fredyfx in the previous question , I was able to make progress on what I needed. Now I am faced with the following problem, I need id="txt"only the first name of the user to be entered, for this I would do a split that detects up to the first blank space ' ', as I would do in the console, for example:

var str = 'Pepito Perez'; 

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

This would clearly bring me "Pepito", a result which I must transfer to my second input, without success.

Should I call it as a function string? How should I convert it from stringto input?

Thanks for your help.

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.

javascript

1 Answers

  1. Best Answer

    If I understood you correctly, all you need is to combine the two codes. It would be something like this:

    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.

    • 6