Merge pull request alibaba#10 from JackPu/html5-feture-input-enter-ke…

…y-type

+ [html5] input and textarea enter key type

examples/component/input-demo.we

@@ -93,6 +93,17 @@
                         id="input1"
                 />
             </wxc-panel>
+            <wxc-panel title="input keybord event type" type="primary">
+                  <input
+                          type="text"
+                          placeholder="search..."
+                          class="input"
+                          value=""
+                          id="search-input"
+                          return-key-type="next"
+                          onreturn="return"
+                  />
+            </wxc-panel>
         </scroller>
     </div>
 </template>
@@ -133,6 +144,9 @@
             },
             blur: function () {
                 this.$el('input1').blur();
+            },
+            return: function(event) {
+                console.log('onreturn', event.returnKeyType);
             }
         }
     };

examples/vue/components/input.vue

@@ -13,6 +13,18 @@
       <text>oninput: {{txtInput}}</text>
       <text>onchange: {{txtChange}}</text>
     </panel>
+    <panel title="test input enter key type" type="primary">
+      <input
+        type="text"
+        placeholder="search ..."
+        class="input"
+        autofocus="true"
+        return-key-type="search"
+        @return="onreturn"
+      />
+      <text>enter key type: {{returnType}}</text>
+      <text>Action: {{msg}}</text>
+    </panel>
   </scroller>
 </template>
 
@@ -30,7 +42,9 @@
     data: function () {
       return {
         txtInput: '',
-        txtChange: ''
+        txtChange: '',
+        returnType: '',
+        msg: ''
       }
     },
     components: {
@@ -50,6 +64,10 @@
           message: 'onitput: ' + event.value,
           duration: 1
         })
+      },
+      onreturn: function(event) {
+        this.returnType = event.returnKeyType;
+        this.msg = 'You are ' + this.returnType + ' ' + event.value;
       }
     }
   };

examples/vue/components/textarea.vue

@@ -0,0 +1,57 @@
+<template>
+  <scroller>
+    <panel title="textarea" type="primary">
+      <textarea
+        class="textarea"
+        autofocus="true"
+        return-key-type="done"
+        @return="onreturn"
+        @change="onchange"
+        @input="oninput"
+      />
+      <text>oninput: {{txtInput}}</text>
+      <text>onchange: {{txtChange}}</text>
+      <text>enter key type: {{returnType}}</text>
+      <text>action: {{msg}}</text>
+    </panel>
+  </scroller>
+</template>
+
+<style scoped>
+  .textarea {
+    font-size: 30px;
+    height: 280px;
+    width: 400px;
+    border-width: 2px;
+    border-color: #ccc;
+  }
+</style>
+
+<script>
+  var modal = weex.requireModule('modal')
+  module.exports = {
+    data: function () {
+      return {
+        txtInput: '',
+        txtChange: '',
+        returnType: '',
+        msg: ''
+      }
+    },
+    components: {
+      panel: require('../include/panel.vue')
+    },
+    methods: {
+      onchange: function(event) {
+        this.txtChange = event.value;
+      },
+      oninput: function(event) {
+        this.txtInput = event.value;
+      },
+      onreturn: function(event) {
+        this.returnType = event.returnKeyType;
+        this.msg = 'You are "' + this.returnType + '" ' + event.value;
+      }
+    }
+  };
+</script>

html5/render/browser/extend/components/input.js

@@ -1,4 +1,5 @@
 'use strict'
+import { findEnterKeyType } from '../../utils/index'
 
 let appendStyle
 
@@ -34,9 +35,27 @@ const proto = {
     node.classList.add(this.className)
     node.classList.add('weex-element')
     this.placeholder && (node.placeholder = this.placeholder)
+    this.createKeybordEvent(node)
     return node
   },
 
+  // support enter key envent
+  createKeybordEvent (node) {
+    if (Array.isArray(this.data.event) && this.data.event.indexOf('return') > -1) {
+      node.addEventListener('keyup', (ev) => {
+        const code = ev.keyCode
+        let key = ev.key
+        if (code === 13) {
+          if (key.toLowerCase() === 'tab') {
+            key = 'next'
+          }
+          const rightKeyType = findEnterKeyType(this.data.attr['returnKeyType'])
+          this.dispatchEvent('return', { returnKeyType: rightKeyType })
+        }
+      }, false)
+    }
+  },
+
   focus () {
     this.node.focus()
   },
@@ -68,6 +87,10 @@ const attr = {
     this.node.type = availableTypes.indexOf(val) !== -1
       ? val
       : DEFAULT_TYPE
+  },
+
+  returnKeyType (val) {
+    this.node.returnKeyType = val || ''
   }
 }
 
@@ -110,6 +133,16 @@ const event = {
         timestamp: Date.now()
       }
     }
+  },
+
+  return: {
+    updator: function (obj) {
+      return {
+        attrs: {
+          value: this.node.value
+        }
+      }
+    }
   }
 }
 

html5/render/browser/extend/components/textarea.js

@@ -1,4 +1,5 @@
 'use strict'
+import { findEnterKeyType } from '../../utils/index'
 
 const DEFAULT_ROWS = 2
 
@@ -14,7 +15,25 @@ const proto = {
     const node = document.createElement('textarea')
     node.classList.add('weex-element')
     node.classList.add('weex-textarea')
+    this.createKeyboardEvent(node)
     return node
+  },
+
+  // support enter key envent
+  createKeyboardEvent (node) {
+    if (Array.isArray(this.data.event) && this.data.event.indexOf('return') > -1) {
+      node.addEventListener('keyup', (ev) => {
+        const code = ev.keyCode
+        let key = ev.key
+        if (code === 13) {
+          if (key.toLowerCase() === 'tab') {
+            key = 'next'
+          }
+          const rightKeyType = findEnterKeyType(this.data.attr['returnKeyType'])
+          this.dispatchEvent('return', { returnKeyType: rightKeyType })
+        }
+      }, false)
+    }
   }
 }
 
@@ -34,6 +53,9 @@ const attr = {
   },
   autofocus (val) {
     this.node.autofocus = !!val
+  },
+  returnKeyType (val) {
+    this.node.returnKeyType = val || ''
   }
 }
 
@@ -69,6 +91,16 @@ const event = {
         timestamp: Date.now()
       }
     }
+  },
+
+  return: {
+    updator: function (obj) {
+      return {
+        attrs: {
+          value: this.node.value
+        }
+      }
+    }
   }
 }
 

html5/render/browser/utils/index.js

@@ -213,3 +213,12 @@ export function kebabToCamel (name) {
     return `${g1.toUpperCase()}`
   })
 }
+
+export function findEnterKeyType (key) {
+  const keys = ['default', 'go', 'next', 'search', 'send']
+  if (keys.indexOf(key) > -1) {
+    return key
+  }
+  return 'done'
+}
+

html5/render/vue/components/input.js

@@ -2,11 +2,12 @@
  * @fileOverview Input component.
  * Support v-model only if vue version is large than 2.2.0
  */
-
+import { inputCommon } from '../mixins'
 import { extend, mapFormEvents } from '../utils'
 // import { validateStyles } from '../validator'
 
 export default {
+  mixins: [inputCommon],
   props: {
     type: {
       type: String,
@@ -30,7 +31,8 @@ export default {
       type: [String, Boolean],
       default: false
     },
-    maxlength: [String, Number]
+    maxlength: [String, Number],
+    returnKeyType: String
   },
 
   methods: {
@@ -47,6 +49,7 @@ export default {
     // if (process.env.NODE_ENV === 'development') {
     //   validateStyles('input', this.$vnode.data && this.$vnode.data.staticStyle)
     // }
+    const events = extend(this._createEventMap(), mapFormEvents(this))
     return createElement('html:input', {
       attrs: {
         'weex-type': 'input',
@@ -55,12 +58,13 @@ export default {
         disabled: (this.disabled !== 'false' && this.disabled !== false),
         autofocus: (this.autofocus !== 'false' && this.autofocus !== false),
         placeholder: this.placeholder,
-        maxlength: this.maxlength
+        maxlength: this.maxlength,
+        'returnKeyType': this.returnKeyType
       },
       domProps: {
         value: this.value
       },
-      on: extend(this._createEventMap(), mapFormEvents(this)),
+      on: this.createKeyboardEvent(events),
       staticClass: 'weex-input weex-el'
     })
   }

html5/render/vue/components/textarea.js

@@ -1,7 +1,9 @@
+import { inputCommon } from '../mixins'
 import { extend, mapFormEvents } from '../utils'
 // import { validateStyles } from '../validator'
 
 export default {
+  mixins: [inputCommon],
   props: {
     value: String,
     placeholder: String,
@@ -16,27 +18,30 @@ export default {
     rows: {
       type: [String, Number],
       default: 2
-    }
+    },
+    returnKeyType: String
   },
 
   render (createElement) {
     /* istanbul ignore next */
     // if (process.env.NODE_ENV === 'development') {
     //   validateStyles('textarea', this.$vnode.data && this.$vnode.data.staticStyle)
     // }
+    const events = extend(this._createEventMap(), mapFormEvents(this))
     return createElement('html:textarea', {
       attrs: {
         'weex-type': 'textarea',
         value: this.value,
         disabled: (this.disabled !== 'false' && this.disabled !== false),
         autofocus: (this.autofocus !== 'false' && this.autofocus !== false),
         placeholder: this.placeholder,
-        rows: this.rows
+        rows: this.rows,
+        'return-key-type': this.returnKeyType
       },
       domProps: {
         value: this.value
       },
-      on: extend(this._createEventMap(), mapFormEvents(this)),
+      on: this.createKeyboardEvent(events),
       staticClass: 'weex-textarea weex-el',
       staticStyle: this._normalizeInlineStyles(this.$vnode.data)
     }, this.value)

html5/render/vue/mixins/index.js

@@ -1,9 +1,11 @@
 import base from './base'
 import style from './style'
 import scrollable from './scrollable'
+import inputCommon from './input-common'
 
 export {
   base,
+  scrollable,
   style,
-  scrollable
+  inputCommon
 }