javascript - Materialize.css remove styling from input element -


i want make materialize.css cards editable on doubleclick. place input within card div, instead of p.

div.row each cards   div.col.m4.s12     div.card.teal       div.card-content.white-text         if opencard           //input(type='text' value='#{text}')                         textarea.materialize-textarea #{text}         else                              p #{text} 

problem input (and textarea) elements have extensive material design styling, including line underneath input. in other occasions looks neat, inside card unnecessary.

is there way how remove styling input element, usable in such double-click edit mode?

or maybe there other solutions, how edit double-click on card, not involve reuse of styled elements?

p.s. run within meteor, , there jade preprocessor. however, facts should not affect neither question, nor answer.

if double-click isn't essential other functionality, can optimize dropping both double-click , textarea leaving <p> added attribute contenteditable="true". use onblur event listener save edited text.

so in jade file have this:

div.row each cards   div.col.m4.s12     div.card.teal       div.card-content.white-text         p(contenteditable="true") #{text} 

and in template events this:

'blur .card-content p': function(event) {...} 

p.s. while testing locally found out weird issue chrome: additional div on enter - sure take in account.


Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -