Change text box width according to the text inside

Question

我正在使用如下所示的文本框，并且我希望文本框的宽度根据内部文本的大小而定，这可能吗？

@Html.TextBoxFor(model => model.Name, new { disabled = "disabled"  })

Answer 1

An easy answer for your problem is(using some jquery):

<script>
$(document).ready(function () {
    $('.txt').css('width', (($('.txt').val().length)+1) * 7 + 'px');  //You can increase or decrease multiplication factor i.e '7' here as required.
});
</script>

@Html.TextBoxFor(model => model.Name, new { disabled = "disabled",@class="txt" })

DEMO Link :- http://jsfiddle.net/Lbaf8cek/5/

Not for this question because here textbox is disabled but if textbox is not disabled then most easiest way to adjust textbox width is :

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Fiddle Link :- http://jsfiddle.net/kartikeya/1vnw7d44/

Answer 2

This post handles the same topic I believe: Growing text box based on width of characters input

Since you're using mvc and the textbox is disabled for edits, you could try:

@Html.TextBoxFor(model => model.Name, new { disabled = "disabled", length = Model.Name.Length() })

Sorry if my syntax is incorrect but I don't have an IDE up atm. But what you're doing is setting the textbox length to the number of characters of the input. This should effectively set the textbox to the correct length. Unless you have some css rules applied somewhere.

UPDATE:

Another way (like below) is by using Javascript, this way you can widen or shorten your textbox dynamically based on input. But preferably, when it's only for displaying the name, you should try @Html.DisplayFor(...)

Answer 3

UPDATED WITH CODE EXPLANATION:

here you go, the input will always be as long as its characters, whether you type, remove or give it a value before running the script: DEMO

//this is a plugin snippet (or function) to check if the element has
//horizontal scrollbar
$.fn.hasHorizontalScrollBar = function() {
  if (this[0].clientWidth < this[0].scrollWidth) {
    return true
  } else {
    return false
  }
}
//the end of plugin

var originalWidth=$('.txt').width(); //we store the original width
//(the width of the input at the page load) in a variable to use it as a 
//measurement in order to not let the input get smaller than this size 

//this function checks the width of `.txt` (the input) to see if it has 
//horizontal scrollbar or not, if it does then expands the width of the input to
//the scroll size, else it checks to see if the width is added to the 
//original width, if so, removes one character (depending on the font size it'll
//change - here it is 7 px)
function changeWidth(){
    if($('.txt').hasHorizontalScrollBar()){
        $('.txt').width(document.getElementsByClassName('txt')[0].scrollWidth);
    }
    else if(originalWidth<$('.txt').width()){
        $('.txt').width($('.txt').width()-7);
    }
};
//end of the function

changeWidth(); //run the function at page load, to give the input a size as wide as its
// character's length

$('.txt').keydown(changeWidth); //assign the function to the keydown event of the input
//so whenever a character is added or removed the function will run again