Fetching the value of a mdl-textfield

问题

I have the following mdl-textfield:

       <div class="mdl-textfield mdl-js-textfield" id="step_condition">
            <textarea class="mdl-textfield__input" type="text" rows="25"> </textarea>
            <label class="mdl-textfield__label" for="step_json">Step condition</label>
        </div>

To set the value of the field I use:

 $("#step_condition").get(0).MaterialTextfield.change('100');

My questions are:

• is this the correct way of setting the value of the field?
• is there a similar way to fetch the value of the field?

I know I can fetch the value directly from the textarea, but somehow it seems to make more sense to use the API.

回答1:

You should add an id to the textarea itself, like:

<div class="mdl-textfield mdl-js-textfield" >
   <textarea class="mdl-textfield__input" type="text" rows="25" id="step_json"></textarea>
   <label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>

Look at the example on the official specifications, there is no id at the div level. http://www.getmdl.io/components/index.html#textfields-section

To set up the value of the field you could do

$("#step_json").val("100");

However you will have to deal with the fact that the label is not removed automatically. This post should help: https://github.com/google/material-design-lite/issues/903

来源：https://stackoverflow.com/questions/34077730/fetching-the-value-of-a-mdl-textfield