• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Dynamically change textbox to textarea?

 
Madhav Kanneganti
Greenhorn
Posts: 25
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65126
92
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
  • 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.
     
    Madhav Kanneganti
    Greenhorn
    Posts: 25
    • Likes 1
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Hi Thanks for solution. here is the code I used ans worked properly
     
    Bear Bibeault
    Author and ninkuma
    Marshal
    Pie
    Posts: 65126
    92
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 25
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 65126
    92
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Nope, you write the code. I've already told you what it needs to do.
     
    Madhav Kanneganti
    Greenhorn
    Posts: 25
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 65126
    92
    IntelliJ IDE Java jQuery Mac Mac OS X
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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.
     
    • Post Reply
    • Bookmark Topic Watch Topic
    • New Topic