init

xhs-mini-demos/component-case/input/input.js

@@ -0,0 +1,313 @@
+const __templateJs = require("./templates.js");
+const __mergePageOptions = require("../../util/mergePageOptions.js");
+Page(__mergePageOptions({
+  onShareAppMessage() {
+    return {
+      title: 'input',
+      path: 'page/component/pages/input/input'
+    };
+  },
+  data: {
+    // 非受控
+    inputNotBindValue: '',
+    // 非受控有长度
+    inputNotBindValueMaxLength: '',
+    // 受控
+    inputBindValue: '',
+    // 受控只能输入英文
+    wordValue: '',
+    // 受控有长度
+    inputMaxLengthValue: '',
+    // 不限制长度
+    inputMaxLengthInfinity: '',
+    // 密码输入
+    inputPassword: '',
+    // 数字输入
+    inputNumber: '',
+    // 不可输入
+    disabledValue: 'disabled',
+    inputValue: '',
+    inputChangeValue: '',
+    // 非受控 textarea
+    textareaNotBindValue: '',
+    // 受控 textarea
+    textareaBindValue: '',
+    // 受控只能输入英文
+    textareaWordValue: '',
+    // 受控最大长度
+    textareaMaxLengthValue: '',
+    // 非受控最大
+    textareaNoBindMaxLengthValue: '',
+    // 无限长度的 textarea
+    textareaInfinityLengthValue: '',
+    // 不可输入的 textarea
+    textareaDisabled: `I'm disabled
+I'm disabled
+I'm disabled
+    `,
+    password: false,
+    focus: false,
+    value: '',
+    type: 'text',
+    placeholder: '',
+    placeholderClass: 'input-placeholder',
+    disabled: false,
+    maxlength: 140,
+    autoFocus: false,
+    cursor: -1,
+    selectionStart: -1,
+    selectionEnd: -1,
+    focusTime: 0,
+    blurTime: 0
+  },
+  // 非受控
+  bindNotBindInput(e) {
+    this.setData({
+      inputNotBindValue: e.detail.value
+    });
+  },
+  // 非受控有长度
+  bindInputNotBindValueMaxLength(e) {
+    this.setData({
+      inputNotBindValueMaxLength: e.detail.value
+    });
+  },
+  // 受控
+  bindBindInput(e) {
+    this.setData({
+      inputBindValue: e.detail.value
+    });
+  },
+  // 受控只能输入英文
+  bindWordInput(e) {
+    const value = e.detail.value;
+    console.log("%c Line:46 🍐 value", "color:#93c0a4", value);
+    // 过滤非英文字母
+    const valueFilter = value.replace(/[^A-Za-z]/ig, '');
+    console.log("%c Line:49 🥕 valueFilter", "color:#42b983", valueFilter);
+    this.setData({
+      wordValue: valueFilter
+    });
+  },
+  // 受控 textarea 只能输入英文
+  bindTextareaWordInput(e) {
+    const value = e.detail.value;
+    console.log("%c Line:46 🍐 value", "color:#93c0a4", value);
+    // 过滤非英文字母
+    const valueFilter = value.replace(/[^A-Za-z]/ig, '');
+    console.log("%c Line:49 🥕 valueFilter", "color:#42b983", valueFilter);
+    this.setData({
+      textareaWordValue: valueFilter
+    });
+  },
+  // 受控有长度
+  bindMaxLengthInput(e) {
+    this.setData({
+      inputMaxLengthValue: e.detail.value
+    });
+  },
+  // 受控不限制长度
+  bindInputMaxLengthInfinity(e) {
+    this.setData({
+      inputMaxLengthInfinity: e.detail.value
+    });
+  },
+  // 受控密码输入
+  bindPasswordInput(e) {
+    this.setData({
+      inputPassword: e.detail.value
+    });
+  },
+  // 输入数字
+  bindNumberInput(e) {
+    this.setData({
+      inputNumber: e.detail.value
+    });
+  },
+  // 不可输入
+  bindDisabledInput(e) {
+    this.setData({
+      disabledValue: e.detail.value
+    });
+  },
+  // 非受控 textarea
+  bindTextareaNoBindInput(e) {
+    this.setData({
+      textareaNotBindValue: e.detail.value
+    });
+  },
+  // 受控 textarea
+  bindTextareaBindValue(e) {
+    console.log("%c Line:63 🌰 e", "color:#6ec1c2", e);
+    this.setData({
+      textareaBindValue: e.detail.value
+    });
+  },
+  // 最大长度
+  bindTextareaMaxLengthInput(e) {
+    this.setData({
+      textareaMaxLengthValue: e.detail.value
+    });
+  },
+  bindTextareaNoBindMaxLengthValue(e) {
+    this.setData({
+      textareaNoBindMaxLengthValue: e.detail.value
+    });
+  },
+  // 长度不受限的 textarea
+  bindTextareaInfinityLengthValue(e) {
+    this.setData({
+      textareaInfinityLengthValue: e.detail.value
+    });
+  },
+  // 不可输入的 textarea
+  bindTextareaDisabledInput(e) {
+    this.setData({
+      textareaDisabled: e.detail.value
+    });
+  },
+  bindKeyInput(e) {
+    this.setData({
+      inputValue: e.detail.value
+    });
+  },
+  bindReplaceInput(e) {
+    xhs.showToast({
+      title: e.detail.value,
+      icon: 'success',
+      duration: 2000
+    });
+    this.setData({
+      value: e.detail.value
+    });
+    // const value = e.detail.value
+    // let pos = e.detail.cursor
+    // let left
+    // if (pos !== -1) {
+    //   // 光标在中间
+    //   left = e.detail.value.slice(0, pos)
+    //   // 计算光标的位置
+    //   pos = left.replace(/11/g, '2').length
+    // }
+
+    // // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
+    // return {
+    //   value: value.replace(/11/g, '2'),
+    //   cursor: pos,
+    // }
+
+    // 或者直接返回字符串,光标在最后边
+    // return value.replace(/11/g,'2'),
+  },
+
+  bindHideKeyboard(e) {
+    if (e.detail.value === '123') {
+      // 收起键盘
+      xhs.hideKeyboard();
+    }
+  },
+  changeValue({
+    detail
+  }) {
+    this.setData({
+      value: detail.value
+    });
+  },
+  changePlaceholder({
+    detail
+  }) {
+    this.setData({
+      placeholder: detail.value
+    });
+  },
+  changePlaceholderStyle({
+    detail
+  }) {
+    this.setData({
+      placeholderStyle: detail.value
+    });
+  },
+  changePlaceholderClass({
+    detail
+  }) {
+    this.setData({
+      placeholderClass: detail.value
+    });
+  },
+  changeDisabled() {
+    this.setData({
+      disabled: !this.data.disabled
+    });
+  },
+  changePassword() {
+    this.setData({
+      password: !this.data.password
+    });
+  },
+  changeMaxlength({
+    detail
+  }) {
+    this.setData({
+      maxlength: detail.value
+    });
+  },
+  changeFocus() {
+    this.setData({
+      focus: !this.data.focus
+    });
+  },
+  changeCursor({
+    detail
+  }) {
+    this.setData({
+      cursor: detail.value
+    });
+  },
+  changeType({
+    detail
+  }) {
+    this.setData({
+      type: detail.value
+    });
+  },
+  changeSelectionStart({
+    detail
+  }) {
+    this.setData({
+      selectionStart: detail.value
+    });
+  },
+  changeSelectionEnd({
+    detail
+  }) {
+    this.setData({
+      selectionEnd: detail.value
+    });
+  },
+  bindTextFocus({
+    timeStamp
+  }) {
+    this.setData({
+      focusTime: new Date(timeStamp).toLocaleString()
+    });
+  },
+  bindTextBlur({
+    timeStamp
+  }) {
+    this.setData({
+      blurTime: new Date(timeStamp).toLocaleString()
+    });
+  },
+  bindTextInput(e) {
+    console.log(`bindTextInput: ${JSON.stringify(e)}`);
+    this.setData({
+      inputChangeValue: e.detail.value
+    });
+  },
+  onChange(e) {
+    console.log('onChange', e);
+  },
+  bindconfirm(e) {
+    console.log('bindconfirm', e);
+  }
+}, __templateJs));