tw-address-input

tw-address-input

A simple Taiwan address input WebComponent.

English | 中文

Install

$ npm install tw-address-input

Syntax

<script src="tw-address.js"></script>

<form action="#" method="POST">
    <tw-address name="bill-address"></tw-address>
    <input type="submit" value="submit" />
</form>

Demo page

The demo page: https://yishiashia.github.io/address.html

Usage

• name
• value

Attributes

name

String typs. The name of input, it would be the POST parameter name.

value ( getter )

You can get the value of address input component by javascript, for example:

const addrElement = document.querySelector('tw-address')

console.log(addrElement.value)
/*
  It will output:
  {
    zip: '220',
    city: '新北市',
    town: '板橋區',
    address: '漢生東路83巷1號'
  }
 */

Event

change event

When user fill an address, a change event will be dispatch, and you can bind an event listener to handle it:

let addrElement = document.querySelector('tw-address')

addrElement.addEventListener('change', function(option) {
  console.log(option.detail)
  /*
    output example:
      {
        zip: "220",
        city: "新北市",
        town: "板橋區",
        address: "漢生東路83巷1號"
      }
   */
})