0

I have a textbox that serves as an input like this:

<div class="control-group">
    <label class="required">
    Enter stuff here....</label>
    <input type="text" placeholder="Required Field" class="form-control" id="secid">
</div>

I need to make this textbox 'extendable' in the sense that when the user enters some text longer than the width of the textbox, he/she should be able to manually enlarge the box. Much like a textarea tag. how can I make this happen?

4
  • Actually this shouldn't be an issue because a textarea is not a textbox as a banana is not an apple. As a Developer it's our job to show the people who create such requirements, that this is not neccesary in terms of UE and much more.
    – Jeredepp
    Oct 8, 2014 at 9:50
  • Would it be possible to use only a textarea from beginning and define its size like an inbutbox? If you get more chars, just increase the textarea to a normal size.
    – klml
    Oct 8, 2014 at 10:17
  • @klml Will the input tag not be required after I replace it with the textarea tag? Oct 8, 2014 at 10:29
  • @Core_Dumped this depends on your needs. What do you want to do with the value? But Jukka K. Korpela solution is exact what I meant.
    – klml
    Oct 8, 2014 at 14:18

3 Answers 3

1

In principle you can use the CSS property resize on an input element, too, but in practice, this is not supported by browsers. So there is no direct solution.

As a workaround, you could add a script that makes the element resizable. It would be up to you to design and implement it, and it would inevitably be different from browsers’ built-in tools for resizing textarea.

Alternatively, you could replace the input element by a textarea element and make it single-line and resizable horizontally (only), using the resize proper, on browsers that support resizability. Example:

<div class="control-group">
<label class="required" for="secid">
Enter stuff here....</label>    
<textarea type="text" placeholder="Required Field" required
  class="form-control" id="secid"
  rows="1" cols="20" wrap="off"
  style="overflow: hidden; resize: horizontal">
</textarea>
</div> 

You may want to set font family too, since textarea uses monospace font by default.

The main problem with this is that the textarea element is still a multiline element: the user can enter more than one line, just so that only the last line is visible in the box. You would need some JavaScript to prevent this (by capturing any event that might add line breaks to the content).

0

You should define a maximum number of characters until the input will be dynamically replaced by a <textarea /> element, and if the user removes characters, turn the input into a single-line textbox again.

0

Here's how, alltough i strongly advice against it, because that's part of our job to decide when to use textarea and when to use inputtext.

var maxnum = 50;

function checkForReplacementTextarea(){
  var content = $('#secid').val();
  var strlenght = content.length;

  if(strlenght>=maxnum){
    $('#secid').replaceWith('<textarea id="secid" class="form-control" rows="4" cols="50" onkeydown="checkForReplacementTextarea()">'+content+'</textarea>');
    $('#secid').focus();
  }else if(strlenght<maxnum){
    $('#secid').replaceWith('<input type="text" placeholder="Required Field" value="'+content+'" class="form-control" id="secid" onkeydown="checkForReplacementTextarea()">');
    $('#secid').focus();
  }
}

WARNING: focus() sets the cursor at the beginning of the string, to achieve that the cursor travels to end of your text, you'd have to empty and refill the value after focusing on it.

call checkForReplacementTextare() on every update in your textarea

<input type="text" onkeydown="checkForReplacementTextarea()">
2
  • I am really new to Web Dev, so pardon my noob question. Will the input tag not be required after I replace it with the textarea tag? Oct 8, 2014 at 10:26
  • No Problem that's why i toggle the element with the replaceWith() function, this is not a pretty solution for a few reasons. For example you're manipulating (unnecessarely) the DOM way too much, and since you're using an id i have to replace the element because if i would simply hide it, i'd have to remove the id because you wouldn't be able to access the 2nd elememt. In general i strongly advise against my solution. But it's a possibility none the less.
    – Jeredepp
    Oct 8, 2014 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.