vue-quill-editor 如何实现只输入数字

Question

vue-quill-editor 如何实现只输入数字
需要实现一个只输入数字的功能 粘贴的时候也只能粘贴上数字
希望大家指点

Answer 1

一定要用富文本编辑器，不考虑格式（可以换行）的情况下，可以添加text-change事件替换掉非数字及换行字符的内容，示例如下

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor" style="height:300px">
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    function setCuror() {
        var p = quill.container.querySelector('.ql-editor'),
            s = window.getSelection(),
            r = document.createRange();
        r.selectNodeContents(p)
        r.collapse(false)
        s.removeAllRanges();
        s.addRange(r);

    }

    var quill = new Quill('#editor', {
        theme: 'snow'
    });
    quill.on('text-change', function (delta, oldDelta, source) {
        if (source == 'user') {//用户输入数据才对数据进行过滤
            quill.setText(quill.getText().replace(/[^\d\.\n]/g, ''));
            setTimeout(setCuror,50);//需要延时设置光标位置
        }
    });
</script>