How to auto-adjust size of other input fields while typing into input field #1?

Tags: javascript,html,css

Problem :

I am working with an HTML/JavaScript/CSS page that looks something like this,

       input field: (base10) [100                  ]
output field #1 (base08) [144                  ]
output field #2 (base19) [55                   ]
output field #3 (base36) [2S                   ]

and I am trying to achieve something like this,

       input field: (base10) [100                  ]
output field #1 (base08) [144]
output field #2 (base19) [55]
output field #3 (base36) [2S]

with real-time adjustment to the "output" field sizes. The brackets denote the field sizes visible on my screen. How to code that?

All 4 of those lines use the HTML input tag with unique id's. In this case I typed "100" into the base10 field which is arbitrarily long in size, and in real time the JavaScript updates multiple output fields with the number 100 written in other counting systems, and that already works fine, no problem there.

The problem is all those output fields are a pre-determined/hard-coded size, whereas their contents are all different sizes. What I need is for the size attribute of the fields called #1, #2, and #3 to be dynamically updated in real time too, so the field snugly fits each of the contents.

Something tells me that the solution will involve things like onkeyup="Resize(this);" and document.getElementsByName or something similar (preferably no jQuery), but I am not the best with JavaScript syntax and I am just modding this pre-written page under GNU GPL, so I need your help.


Solution :

solved it myself with :

document.getElementById("foo").style.width = ((document.getElementById("foo").value.length + 1) * 6.5); 

it's pretty close, not 100%, as far as the style width matching the input element contents, but at least it's dynamic which is what I was looking for.

    CSS Howto..

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    CSS: How to flow text around both left and right images

    How to add CSS class to the HTML5 picture element

    How do I prevent this list from moving across the page?

    How to reposition CSS-hover popups to stay within a fixed frame?

    How to match a particular tag through css selectors where the class attribute contains spaces?

    How to deselect a table's head and certain tds with css

    css - how to setup image editing page

    CSS: How can I make the pop over menu clickable?

    CSS: how do I position my slideshow counter up into the slideshow

    How can I use Javascript to allow navigation between sections using keyboard shortcuts?

    css - can't get dropdown nav to show above content below it

    How to make the background DIV only transparent using CSS

    How to put gradient on top of background image but below text

    How can i apply css stylesheet to single specific element?

    how to disable drupal7 system css files?

    How to spin an image horizontally with CSS

    How to preload style image to use it when server is down?

    How to create an image hover fade effect with jQuery and CSS?

    jQuery dialog: how to control the button-pane height

    How to add drop down menu using CSS?

    How to select an item that is into another item using CSS?

    How to put all Array values in $_GET[]

    How to fill page width of tables with css

    How to use only CSS to round my div tag area's corners?

    How to increase spacing between dt tags

    How to remove an element without id

    How can I slow down my CSS Animated Text transitions?

    How can I adjust the Wordpress Twentyeleven theme so that the page width is 100% and centered?

    responsive html shows a tablet css design instead of the mobile when on my iphone 4s?