Is it possible to create an input that is self-adjusting to its content?

If possible using jQuery , I have reformed the code a this answer:

function resizeInput() {
  
  var valueLength = $(this).prop('value').length;
  
    // Para que no arroje error si el input se vacía
    if (valueLength > 0) {
      
      $(this).prop('size', valueLength);
    }
}

$('input[type="text"]').on('keyup', resizeInput).each(resizeInput);

input[type="text"] {  
  min-width: 100px;
  padding-right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" value="El input se alarga ahora automáticamente" />

The effect of input that fits your content could be easily simulated using two div .

The div external% would act as a container and would be the one that established the minimum width that the simulated input will have. In addition, you must use the display: inline-block property so that the container conforms to its content.

Subsequently, the div that will act as input must use the contenteditable="true" property so that its content is editable. You must use the width: 100% property to fit 100% of the width of the container.

Example:

#contenedor{
  display: inline-block;
  min-width: 100px;
}

#texto{
  background-color: red;
  width: 100%;
}

<div id="contenedor">
    <div id="texto" contenteditable="true"></div>
</div>

However, since I suppose you want to use the value of this simulated input (which is actually a div ) when sending the data through the form, what you can do is create a input hidden and assign it the value of the simulated input to this input hidden by Javascript .

The code, within a form and together with the corresponding Javascript , would be something like:

document.forms["formulario"].onsubmit = function(){
    var texto = document.getElementById("tituloOculto").value = document.getElementById("texto").innerHTML;
    alert(texto);
}

#contenedor{
  display: inline-block;
  min-width: 100px;
}

#texto{
  background-color: red;
  width: 100%;
}

<form id="formulario" action="tuarchivo.php" method="post">
  <div id="contenedor">
    <div id="texto" contenteditable="true"></div>
  </div>
  <input type="hidden" name="titulo" id="tituloOculto" />
  <button type="submit">Agregar Nuevo</button>
</form>

where tuarchivo.php will be the PHP document in which you retrieve the form data. When assigning the data to the input with the property name and being titulo the value of said property, you can recover the data for the title from your PHP like this:

$_POST["titulo"];

since you have previously assigned the value of the input text simulated by Javascript when submitting the form.

Note: In the second example the alert will not be shown since the system blocks the sending of the form, I suppose due to security issues and because the file does not exist. JSFiddle However, if it lets you send the form and show the alert even if it shows you an error Obviously, you can not send anything to that file because you can not find it.

As you can see, you can simulate the effect of a input that fits your content simply with CSS. Then to be able to send it through the form you will only need an additional hidden input and a couple of Javascript lines.