美文网首页CSS
vue input相关问题

vue input相关问题

作者: 思古子 | 来源:发表于2019-08-09 10:54 被阅读0次
    本文主要讲解input常见使用以及使用过程中遇到的问题。
    1. input输入框禁止显示历史记录

    在输入input时会显示原来输入的内容,禁止这种情况只需要在input加入:

    autocomplete="off"

    2. input失去焦点监听以及按回车键失去焦点处理

    vue:

    <input @keyup.enter="$event.target.blur" @blur="blurfunction" />

    blurfunction() {

      处理逻辑

    }

    3.修改input placeholder文字颜色

    placeholder是css3中表单元素input的一个占位符,通过下面几行代码修改placeholder文字的颜色。

    修改所有的input:

    ::-webkit-input-placeholder { color: red; }

    :-moz-placeholder { color: red; } //火狐18-

    ::-moz-placeholder { color: red; } //火狐19+

    :-ms-input-placeholder { color: red; }

    修改某个标签(在input上加个id):

    #myInput::-webkit-input-placeholder { color: red; }

    #myInput:-moz-placeholder { color: red; }

    #myInput:-ms-input-placeholder { color: red; }

    4.Vue项目input框得到焦点选中文字

    <input v-model='value' @focus="focus($event)">

    //得到焦点选中

    focus(event) {

      event.currentTarget.select()

    }

    简洁写法:

    <input v-model='value' @focus="$event.target.select()">

    请记住,如果您的输入位于组件内,则必须向事件添加.native,如下所示:

    <my-component v-model='value' @focus.native="$event.target.select()"></my-component>

    如果觉得对你有用、有帮助,欢迎点赞收藏。

    相关文章

      网友评论

        本文标题:vue input相关问题

        本文链接:https://www.haomeiwen.com/subject/hmycjctx.html