title: input type: example layout: example web_bundle_url: ../js/examples/input.web.js
<template>
<div class="wrapper">
<input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur">
</div>
</template>
<script>
const modal = weex.requireModule('modal')
export default {
methods: {
oninput (event) {
console.log('oninput:', event.value)
modal.toast({
message: `oninput: ${event.value}`,
duration: 0.8
})
},
onchange (event) {
console.log('onchange:', event.value)
modal.toast({
message: `onchange: ${event.value}`,
duration: 0.8
})
},
onfocus (event) {
console.log('onfocus:', event.value)
modal.toast({
message: `onfocus: ${event.value}`,
duration: 0.8
})
},
onblur (event) {
console.log('onblur:', event.value)
modal.toast({
message: `input blur: ${event.value}`,
duration: 0.8
})
}
}
}
</script>
<style>
.input {
font-size: 50px;
width: 650px;
margin-top: 50px;
margin-left: 50px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
color: #666666;
border-width: 2px;
border-style: solid;
border-color: #41B883;
}
</style>