mdl-phone-textfield
An Material Design Lite phone textfield implementation for capturing user entered phones (https://github.com/google/material-design-lite)
A custom textfield implementation of phone number component for Material Design Lite
Install
Via npm:
npm install mdl-phone-textfield
Then include in your html:
<link rel="stylesheet" href="./bower_components/mdl-phone-textfield/dist/mdl-phone-textfield.min.css">
...
<script src="./bower_components/mdl-phone-textfield/dist/mdl-phone-textfield.min.js"></script>
Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL Introduction.
To include a MDL phone textfield component:
1. Code a <div> element to hold the phone text field.
<div>
...
</div> 2. Inside the div, code an <input> element add an id attribute of your choice.
<div>
<input type="text" id="sample3">
</div> 3. Also inside the div, after the <input> field, code a <label> element with a for attribute whose value matches the input element's id value, and a short string to be used as the field's placeholder text.
<div>
<input type="text" id="sample3">
<label for="sample3">phone Example...</label>
</div> 4. Add one or more MDL classes, separated by spaces, to the div container, input field, input label, and error message using the class attribute.
<div class="mdl-phone-textfield mdl-js-phone-textfield mdl-phone-textfield--floating-label">
<input class="mdl-phone-textfield__input" type="text" id="sample3">
<label class="mdl-phone-textfield__label" for="sample3">phone Example...</label>
</div>The phone textfield component is ready for use.
Examples
phone field with a standard label.
<div class="mdl-phone-textfield mdl-js-phone-textfield">
<input class="mdl-phone-textfield__input" type="text" id="sample1">
<label class="mdl-phone-textfield__label" for="sample1">phone Example...</label>
</div>phone field with a floating label.
<div class="mdl-phone-textfield mdl-js-phone-textfield mdl-phone-textfield--floating-label">
<input class="mdl-phone-textfield__input" type="text" id="sample4">
<label class="mdl-phone-textfield__label" for="sample4">phone Example...</label>
</div>phone field with a standard label, and error message.
<div class="mdl-phone-textfield mdl-js-phone-textfield">
<input class="mdl-phone-textfield__input" type="text" id="sample4">
<label class="mdl-phone-textfield__label" for="sample4">phone Example...</label>
<span class="mdl-phone-textfield__error">(999)999-9999</span>
</div>