CODEWITHSUNDEEP
htmltextboxtextarea
Core_Dumped
Core_Dumped

Reputation: 4719

How can I use a textarea as an input?

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?

Upvotes: 0

Views: 2002

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

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).

Upvotes: 1

Jeredepp
Jeredepp

Reputation: 222

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()">

Upvotes: 0

Mat&#237;as Fidemraizer
Mat&#237;as Fidemraizer

Reputation: 64943

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.

Upvotes: 0

Related Questions