Grow your CSS skills. Land your dream job.

Can’t change textarea to input

  • # April 13, 2013 at 3:58 am

    Hi guys, i’ve been trying to customizing this virtual keyboard but have no clue what is wrong.

    If i change
    <textarea id=”write” type=”password” rows=”1″ cols=”30″></textarea>
    to
    <input id=”write” type=”password”/> the virtual keyboard isn’t working.

    Could anyone please help me how to solve this? Thanks in advanced.

    Please check this out
    [http://jsfiddle.net/rhXx8/2/](http://jsfiddle.net/rhXx8/2/ “Virtual Keyboard JQuery”)

    # April 13, 2013 at 5:28 am

    The function changes what’s inside the element, which works for textareas but not for inputs because they are empty elements. You can set the value attribute on inputs though.

    EDIT: After a quick test, setting the value attribute isn’t ideal either.

    EDIT: Actually it does work, with jQuery’s `val` function (I tried `attr(‘value’)` first)

    http://jsfiddle.net/rhXx8/3/

    # April 13, 2013 at 9:19 am

    thanks CrocoDillon, it works. But i don’t understand why is it input elements are empty elements? If u don’t mind could you please give me an insight or reference somewhere on the net? Thanks again :)

    # April 13, 2013 at 10:02 am

    Normally elements can have other elements, text or comments inside them (between the opening and closing tags), for example `` where the textarea has some text inside it. You can set whatever is inside an element with jQuery’s `.html()` function.

    Input elements are empty or self-closing elements, in xhtml that would be obvious with a slash right before the right bracket ``, in html5 both with or without the slash are valid. Anyway because they are empty elements `.html()` does nothing.

    Empty elements can have attributes though.

    Googling I found [this short explanation](http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/), maybe it helps :)

    # April 13, 2013 at 10:17 am

    aha! you have enlightened me. That’s why i have to use .val to get the value out instead of .html. Thank you. :)

    # April 13, 2013 at 10:23 am

    Yes, `val()` gets or sets whatever kind of value the form element is using, not sure how it works under the hood, don’t really care either… for now :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".