Size-changing

Question

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>

What your asking is a little unclear. Is the width of the border the full width of the input until you start typing? If you want the border to change _as someone types_ then you're going to need to use JS. — hungerstar, Mar 03 '16 at 16:59
@hungerstar Sorry for confusion, I meant the width of the textbox... — Maya, Mar 08 '16 at 13:37

score 1 · Answer 1 · answered Mar 03 '16 at 17:01

1

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.

answered Mar 03 '16 at 17:01

durbnpoisn

4,666
2
16
30

Thanks, but using hardcoded 5px width isn't what I want. Also, backspacing would increase the width, instead of decreasing it. But thanks to you I realized I **need** to use JS, when I wanted to use it only as a last resort. – Maya Mar 08 '16 at 14:14

score 0 · Accepted Answer · edited May 23 '17 at 12:22

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>

Size-changing

2 Answers2