vue.js文本框字数限制

<div>
                    <textarea placeholder="填写服务备注" style="width:100%; border:solid 1px #d8d8d8; border-radius:3px; font-size:14px; padding:10px;" rows="3" maxlength="50" @input="descInput"
v-model="desc"></textarea>
                    <p class="pay-service-textarea-text"><span>{{remnant}}</span>/50</p>

</div>

<script>

export default {
    data() {
            return {

       remnant:0

    }

    },

methods: {
            descInput() {
                var txtVal = this.desc.length;  //desc 是设置v-model的值
                this.remnant = txtVal;
        }

}

}

</script>

时间: 2024-12-14 18:35:03

vue.js文本框字数限制的相关文章

[js开源组件开发]js文本框计数组件

js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http://www.lovewebgames.com/jsmodule/word-count.html,它的源文件托管在github上:https://github.com/tianxiangbing/word-count 使用方法案例: <div class="txt-count-container

jquery仿新浪微博限制文本框字数

参考博客:http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html $(function(){ var limitSum = 140;//限制的字数 var showWords = $("#showWords"); //文本框获得焦点和失去焦点时的事件 $("#txt").focus(function(){ if($(this).

JS文本框的换行

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>让HTML文本框textarea里的换行等格式用js保留下来</title> </head> <body> <form id="form1" name="form1&

关于文本框字数的限制以为动态显示剩余字数

 一.首先先看一个非常普遍的效果截图,根据需求写代码 <div style="padding-bottom: 100px"> <textarea style="width:230px;height:160px;" id="textArea" cols="30" rows="10">dancer测试!</textarea> <span><span id=&

js文本框只能输入数字,

1,文本框只能输入数字代码(小数点也不能输入) 复制代码代码示例: <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 2,只能输入数字,能输小数点. 复制代码代码示例: <input onkeyup="if(isNaN(value))execCommand('und

js文本框验证

1 不能为空 2 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 3 4 只能输入英文和数字 5 <input onblur="if(/[^0-9a-zA-Z]/g.test(value))alert('有错')"> 6 <input onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')

Vue-multiselect详解(Vue.js选择框解决方案)

github地址:https://github.com/shentao/vue-multiselect 以下代码,可以直接建一个html文件,运行看到效果: 运行效果: <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script src="https:/

php随笔7-thinkphp OA系统 JS 文本框输入实时控制字数

JS: //多行文本输入框剩余字数计算 function checkMaxInput(obj, maxLen) { if (obj == null || obj == undefined || obj == "") { return; } /*if (maxLen == null || maxLen == undefined || maxLen == "") { maxLen = 250; }*/ /* var strResult; var $obj = $(obj

js 实时计算文本框字数限制

$.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', function() { var id = $(this).attr("id"); var maxContent=200; var strlen = 0; //初始定义长度为0 var txtval = $('#'+id).val().trim(); for (var i = 0; i <txtv