CODEWITHSUNDEEP
javascripthtmlcsswidthtextfield
Maya
Maya

Reputation: 1537

Size-changing <input>

I have a textfield in my HTML with white bottom border when focused and I want it to change width of the textfield to the length of the current text in it (with some limit of course). I tried css min-width and max-width, but it seems to do nothing. I think implementing it with JS would need a hardcoded width table, which I don't want to do.

EDIT:
It's just simple CSS, but here's the code:

#container {
  width: 100%;
  height: 52px;
  background: #673ab7;
}

#textbox {
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background: none;
  border: none;
  vertical-align: top;
  margin-top: 13px;
  margin-left: 13px;
  outline: none;
}

#textbox:focus {
  border-bottom: 2px solid white;
}
<div id="container">
  <input type="text" id="textbox" placeholder="placeholder" />
</div>

Upvotes: 2

Views: 71

Answers (2)

Maya
Maya

Reputation: 1537

I found a way to do it without any width hardcoding after I found this. I'm using jQuery here because I already used it in my project, but it should be relatively easy to port it to plain JavaScript. Characters like &, <, > and space can bug it, so they need to be replaced with &...; encoding.

$(document).ready(function(){
  $('#textbox').on('input', function(){
    if($('#textbox').val().length == 0){
      $('#measure').html($('#textbox').attr('placeholder'));
    }else{
      var text = $('#textbox').val();
      text = text.replace(/&/g, '&amp;');
      text = text.replace(/</g, '&lt;');
      text = text.replace(/>/g, '&gt;');
      text = text.replace(/ /g, '&nbsp;');
      $('#measure').html(text);
    }
    
    var w = $('#measure').width();
    if(w > 600) w = 600;
    $('#textbox').width(w);
  });
  
  $('#textbox').trigger('input');
});
html, body {
  margin: 0;
}

#container {
  width: 100%;
  height: 52px;
  background: #673ab7;
}

#textbox {
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background: none;
  border: none;
  vertical-align: top;
  margin-top: 13px;
  margin-left: 13px;
  outline: none;
}

#textbox:focus {
  border-bottom: 2px solid white;
}

#measure {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input type="text" id="textbox" placeholder="placeholder" />
</div>

<div id="measure"></div>

Upvotes: 0

durbnpoisn
durbnpoisn

Reputation: 4669

This should work well enough:

<form>
<input type="text" id="textfield" onkeyup="changeSize()">
</form>

var sizeIs=20;
function changeSize(){
sizeIs=sizeIs+5;
document.getElementById("textfield").style.width= sizeIs+"px";
}

What this does is, every time the user types a character, the function fires and increases the size of the text field. You can use this as a guide to do whatever you need to.

Upvotes: 1

Related Questions