Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #41380

Re: styling <input type=text> elements

Show all headers | View raw

On Friday, July 28, 2023 at 2:11:45 PM UTC-5, Ben Bacarisse wrote:
> luserdroog <luser...@gmail.com> writes: 
> 
> > After much searching and struggling I've discovered that the 
> > only way to adjust the size of an <input type=text> element is 
> > with its size="number-of-chars" attribute.
> Can you say more? Are you limited to what browsers you must support. I 
> thought you could style the width in most. 
> 

Thanks for all the responses. To the questions, it's a very simple 
single page web app with only a half dozen users and I'm also the
primary user/developer/tester. 

The context is a text edit widget that manifests inside a spreadsheet-like
table view of personnel scheduling data. Clicking a cell turns the 
<td><span/></td> into a <td><input></td> and then onchange or onblur on 
the input changes it back to a span.

eg.
https://github.com/luser-dr00g/luser-dr00g.github.io/blob/master/cm-tool.html#L1092

function addGridNotesWidgets(){
  let notes = grid.querySelectorAll( ".notes" );
  notes.forEach( (note) => {
    let idx = note.dataset.index;
    const clickHandler = (event) => {
      let edit = document.createElement( "input" );
      edit.value = global.data[ idx ][5];
      //edit.size = 30;     // tweak the size or width here?
      let target = note.childNodes[0];
      note.replaceChild( edit, target );
      note.parentNode.removeEventListener( "click", clickHandler );
      const done = (event) => {
	if(  edit.value == ""  ) edit.value = "\t";
	target.textContent = edit.value;
	changeNotes( idx, edit.value );
	edit.parentNode.replaceChild( target, edit );
	saveData();
	output();
      };
      edit.addEventListener( "change", done );
      edit.addEventListener( "blur", done );
      edit.focus();
    };
    note.parentNode.addEventListener( "click", clickHandler );
  });
}

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-28 06:31 -0700
  Re: styling <input type=text> elements Ben Bacarisse <ben.usenet@bsb.me.uk> - 2023-07-28 20:11 +0100
    Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 06:53 -0700
      Re: styling <input type=text> elements "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2023-07-31 20:59 -0700
        Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-08-02 07:33 -0700
    Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 06:58 -0700
      Re: styling <input type=text> elements Ben Bacarisse <ben.usenet@bsb.me.uk> - 2023-07-31 16:49 +0100
        Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 09:41 -0700
          Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 09:57 -0700
  Re: styling <input type=text> elements JJ <jj4public@outlook.com> - 2023-07-29 17:05 +0700
    Re: styling <input type=text> elements The Natural Philosopher <tnp@invalid.invalid> - 2023-07-29 17:49 +0100
  Re: styling <input type=text> elements Dr.Kral@nyc.rr.com - 2023-07-29 08:57 -0400
    Re: styling <input type=text> elements The Natural Philosopher <tnp@invalid.invalid> - 2023-07-29 17:52 +0100
  Re: styling <input type=text> elements Arno Welzel <usenet@arnowelzel.de> - 2023-07-30 09:45 +0200

csiph-web