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
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號"
}
*/
})