wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Dynamically change textbox to textarea? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Dynamically change textbox to textarea?" Watch "Dynamically change textbox to textarea?" New topic
Author

Dynamically change textbox to textarea?

Madhav Kanneganti
Greenhorn

Joined: Jan 20, 2012
Posts: 25
Hi,
I've a text box on page which is a size of 50 chars, if the user types (copy/paste) text more than 50 chars, the text box sould change to textarea. How that possible in javascript? I tried find the solutions but unable to find. Please advice
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60055
    
  65

  • Grab the value from the text box.
  • Create a text area element.
  • Set the text value as the contents.
  • Insert the textarea element into the DOM after the text box.
  • Remove the text box.


  • Give the code a try and post back with any problems that you have with it.

    P.S. All of this would be much easier with the assist of a library such as jQuery.


    [Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
    Madhav Kanneganti
    Greenhorn

    Joined: Jan 20, 2012
    Posts: 25
    Hi Thanks for solution. here is the code I used ans worked properly
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60055
        
      65

    Not a bad first try. But there are some problems with the code. Firstly, I personally wouldn't use innerHTML in this way as I don't like building up markup in strings. The major problem though, is that you remove a single element from the parent, and then replace the entire content of the parent with innerHTML. This might work in cases where there's only one child element, but where there are sibling elements, it will wipe out all the siblings.

    Look at the steps I outlined and see if you can solve this problem.
    Madhav Kanneganti
    Greenhorn

    Joined: Jan 20, 2012
    Posts: 25
    But here the parent is <div> tag, and for each textbox there is only one parent tag, hence it cleans only that element.

    Please give me the other solution as you recommended, I think that will be helpful.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60055
        
      65

    Nope, you write the code. I've already told you what it needs to do.
    Madhav Kanneganti
    Greenhorn

    Joined: Jan 20, 2012
    Posts: 25
    Yes, I've used dom to create element dynamically, but im unable to create through dynamically created textbox,
    i.e. I'm creating a dynamic textbox and adding onkeyup event to call text2textarea(this) function, when I click on button its creating textbox but unable to call that javascript function.
    please see the following code
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60055
        
      65

    Have you inspected the created elements to see how they differ from the statically created ones?

    All modern browsers have debuggers. Use it!

    Check that the event handler is created as you expect.

    And, as I mentioned before, experienced developers will not write this kind of code in raw JavaScript but will use a library such as jQuery.
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: Dynamically change textbox to textarea?
     
    Similar Threads
    relayouting after setViewportView for JScrollPane
    how to show contain of text box as a URL
    Getting the line-number of a text
    Info dialog in lwuit
    textbox submission length limitation?