【问题标题】:How to add text to user input - Vue如何向用户输入添加文本 - Vue
【发布时间】:2020-08-22 13:46:30
【问题描述】:

我有一个输入,用户可以在其中输入价格。当用户按下数字键时,我想在他们键入的任何内容前面加上一个“£”符号。

像这样但在输入字段中可见,而不仅仅是绑定到数据属性:

// empty
£1 // first keydown
£12
£125

示例: https://jsfiddle.net/Daniel_Knights/6xn12tj9/6/

任何想法如何实现这一目标?尝试了一些东西,但我很难过。

【问题讨论】:

    标签: javascript vue.js


    【解决方案1】:

    这是因为您将输入类型设置为数字。所以你只能使用数字。

    但如果你想强制用户只输入数字,你可以这样做:

    <div id="app">
      <input type="text" :placeholder="placeholderPrice" v-model="price" @keypress="mustNumber"/>
      <div class="price">
        <p v-if="price !== ''">
        </p>
        {{ price }}
      </div>
    </div>
    
    new Vue({
      el: "#app",
      data: {
        price: "£",
      },
      methods: {
            inputPrice(e) {
            this.price = `£${e.target.value}`;
        },
        mustNumber($event) {
                let keyCode = $event.keyCode ? $event.keyCode : $keyCode;
    
                // only allow number and one dot
                if (
                    (keyCode < 48 || keyCode > 57) &&
                    (keyCode !== 46)
                ) {
                    $event.preventDefault();
                }
            }
      }
    })
    

    【讨论】:

    【解决方案2】:

    您需要屏蔽输入。例如你可以使用https://vuejs-tips.github.io/v-money/

    <template>
      <div>
        <money v-model="price" v-bind="money"></money> {{price}}
      </div>
    </template>
    
    <script>
      import {Money} from 'v-money'
    
      export default {
        components: {Money},
    
        data () {
          return {
            price: 123.45,
            money: {
            decimal: ',',
            thousands: '.',
            prefix: '£ ',
            suffix: '',
            precision: 2,
            masked: false
          }
          }
        }
      }
    </script>
    

    【讨论】:

      【解决方案3】:

      嗨,Daniel,我认为您可能需要将 type="number" 更改为 text 以允许您使用非数值

      【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2022-11-28
      • 1970-01-01
      • 1970-01-01
      • 2018-06-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-08
      相关资源
      最近更新 更多