【快应用】如何限制input组件的输入值个数

​问题背景：

快应用中如何实现控制input输入，超过规定字数就弹窗提示且无法输入超过规定的字数？

 

实现方案：

可通过this.$watch()监测input组件的输入值和@change事件，当输入值超过限定字数给出弹窗提示，并强制将输入的值改为限定字数内。

 

实现代码：

<template>

  <div class="container">

    <text>仅支持输入5个值</text>

    <input class="input-text" id="text1" value="{{content}}" @change="handleInputValueChanged"></input>

  </div>

</template>

<style>

  .container {

    flex: 1;

    flex-direction: column;

    align-items: center;

  }

  .input-text {

    height: 100px;

    width: 85%;

    border: 1px solid #000000;

    font-size: 80px;

  }

</style>

<script>

  import prompt from '@system.prompt';

  module.exports = {

    data: {

      content: '',

      inputText: '',

    },

    onInit() {

      this.$page.setTitleBar({ text: '' })

    },

    test(e) {

      this.$watch('this.content', 'handleInputValueChanged')

    },

    handleInputValueChanged: function (e) {

      this.content = e.value;

      console.log('handleInputValueChanged:' + this.content);

      if (this.content.length === 5) {

        console.log('value length greater than 5');

        prompt.showToast({

          message: "消息最长为5",

          gravity: 'center'

        })

        this.inputText = this.content

      }

      if (this.content.length > 5) {

        this.content = this.inputText

      }

    },

  }

</script>

​欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh