Vue textarea动态显示行数

最新推荐文章于 2024-06-04 11:52:20 发布
最新推荐文章于 2024-06-04 11:52:20 发布
阅读量4k 收藏 12
点赞数 9
分类专栏： 前端 文章标签： html5 javascript css3
原文链接：https://blog.csdn.net/GB511846886/article/details/101646683
版权

效果

在这里插入图片描述

.edit {
    display: flex;
     height: 300px;
 }
 #leftBox {
     width: 40px; 
     height:100%; 
     text-align:left; 
 }
 #edit-content {
     padding:10px 8px;  
     width:100%; 
     height:100%; 
     font-size: 12px;
     line-height: 24px;
     color: black; 
     font-family: inherit; 
     border:1px solid #eaeaea; 
     background: rgb(255, 255, 255, 1);
     box-sizing: border-box;
     outline:none; 
     resize: none; 
 }
 #leftNum { 
     padding:10px 4px; 
     height:100%; 
     width: 100%; 
     line-height: 24px;
     font-size: 12px; 
     text-align: right; 
     color: #999;
     font-weight: bold; 
     resize: none;
     outline:none; 
     overflow-y: hidden; 
     overflow-x: hidden; 
     border: 0; 
     background:rgba(199, 208, 220, 1);
     box-sizing: border-box;
 }

<body>
    <div class="edit" id="app">
        <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>
        <textarea @input="handleTextareaInput" v-model="areatext" onscroll="document.getElementById('leftNum').scrollTop = this.scrollTop;" id="edit-content"></textarea>
    </div>
</body>

new Vue({
    el: '#app',
    data: {
        areatext: 'a\r\nb\r\nd',
        num: ''
    },
    methods: {
        handleTextareaInput(e) {
            var str = e.target.value
            str = str.replace(/\r/gi,"");
            str = str.split("\n");
            n = str.length;
            var lineobj = document.getElementById("leftNum");
            for(var i = 1;i <= n;i ++){
                if(document.all){
                    this.num += i + "\r\n";   //判断浏览器是否是IE  
                }else{
                    this.num += i + "\n";
                }
            }
            lineobj.value = this.num;
            this.num = "";
        }
    },
    mounted() {
        this.handleTextareaInput({target: {value: this.areatext}})
    },
})
Aibac
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
文本编辑器左边显示行数
weixin_30578677的博客
08-12 964
//调用方式 createTextAreaWithLines('codeTextarea'); //文本编辑框左侧行数显示function createTextAreaWithLines(id) { var el = document.createElement('DIV'); var ta = document.getElementById(id); ta.pare...
文本框 textarea 动态显示行数（简单文本编辑器）
GB511846886的博客
09-02 5164
工作需求做一个文本编辑器简单的。 右边输入文字，左边会显示相应的代码行。清空也会变为1. 废话不多说上代码，自己理解。 <style type="text/css"> *{margin: 0; padding: 0;} html,body{height: 100%; margin: 0; padding: 0;font: 12px/1.5 tahoma, a...
el-input文本框换行自动添加行号
最新发布
Yue
06-04 469
【代码】el-input文本框换行自动添加行号。
textarea显示行号
02-24
是一个js插件，可以给textarea的内容显示行号
VUE监控textarea输入的字符数量
12-07
VUE监控textarea输入的字符数量,实时显示可以输入多少个文字。
Vue实现textarea固定输入行数与添加下划线样式的思路详解
01-19
先上效果图###   textarea下划线 设置一张1*35 //行高 的图片 , 设置背景图即可. background: url(‘./img/linebg.png’) repeat; border: none;outline: none;overflow: hidden; line-height: 35px;//注意行高要和背景图高度一致resize: none; 固定输入行数 需求:用户固定不论多少字节,只能输入2行. 因为是限制行数,所以不能用maxlength设置. 实现思路 首先想到计算出用户输入了几行,然后超出部分字符删除掉就OK. <textarea class='
vue3如何获取文本行数
Duo_er的博客
01-28 358
【代码】vue3如何获取文本行数。
Vue实现动态显示textarea剩余字数
08-30
在Vue.js框架中，动态显示textarea的剩余字数是一个常见的需求，这可以帮助用户实时了解他们的输入是否超过了预设的字符限制。以下是如何在Vue中实现这一功能的详细步骤。 首先，我们需要在HTML模板中设置一个`...
关于TEXTAREA控件在显示内容时，只显示第一行的问题。
weixin_30660027的博客
09-08 379
在用TEXTAREA控件在页面上显示内容时，有时候会遇到这个问题： “ 明明控件的值是多行，但在页面上却只显示出了第一行内容。” 此问题比较BT，据说是IE的一个BUG。 解决方法： 1。可以用这种方式绑定控件内容<!<TextArea id=“Content“><%= myContent%></TextArea>--> ...
Vue textarea实现编辑框，并添加行号
weixin_43484014的博客
04-15 2808
实现的效果如下： 我是使用
vue结合html实时截取textarea文本
07-12
vue结合html实时截取textarea文本，获取鼠标下标，截取自定义文本，不错的demo
textarea框增加行号效果
01-26
为原始的HTML页面中的textarea框加入行号，替代一些复杂的文本编辑器
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
10-17
主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 多行输入框显示行号
shykevin的博客
08-17 1549
一、概述 因业务需求，多行文本需要显示行号，方便查看配置。 由于默认的textarea输入框无法显示行号，因此需要使用第三方插件才行。 二、插件 我找了一个插件，叫bin-code-editor，它原本是用来输入json数据的，也可以做json格式校验。 但是java项目的配置文件，也不一定是json格式的，而是yaml格式的。因此，只需要去掉json校验即可。 安装模块 npm instal...
vue el-input textarea如何按行显示和几种效果
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
04-10 5193
参考：Vue textarea动态显示行数_Aibac的博客-CSDN博客_textarea显示行数 关于这个输入框的内容，我收到后端的textarea1为数组[a,b,c],发现放在这个框里没有按照换行显示，而我们想要的效果： prop["num"] data{ retrun{ texterear1：“”， } } wait：{//因为这个是父组件传过来的，我就在这里处理，你们根据自己的 num(){ handler(n,o){//n是父组件的.
Vue 动态实现显示textarea输入数量
qq_41138502的博客
04-28 745
Vue 动态实现显示textarea输入数量 // An highlighted block <div style="position: relative"> <Input v-model="inputVal" type="textarea" :autosize="{minRows: 2,maxRows: 5}" pla...
<textarea>文本域，多行文本输入
热门推荐
燕十三的博客
02-22 2万+
当用户需要在表单中输入大段文字时，需要用到文本输入域。语法：<textarea rows="行数" cols="列数">默认出现文本</textarea>**注意**rows,cols这两个属性可用css样式的width和height来代替：col用width、row用height来代替。示例：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Conte
vue如何控制textarea最大行数
06-01
在Vue中，我们可以使用指令来控制textarea的最大行数。 下面是一个示例代码，可以实现控制textarea最大行数的指令： ```html <template> <div> <textarea v-model="content" v-max-rows="5"></textarea> </div> </template> <script> Vue.directive("max-rows", { inserted: function(el, binding) { var maxRows = binding.value; var textarea = el.querySelector("textarea"); // 监听textarea的输入事件 textarea.addEventListener("input", function() { var lines = this.value.split("\n").length; // 获取当前行数 if (lines > maxRows) { // 如果当前行数超过最大行数，则禁止输入内容 this.value = this.value.slice(0, -1); } }); } }); export default { data() { return { content: "" }; } }; </script> ``` 在上述代码中，我们定义了一个名为`v-max-rows`的指令，并在其`inserted`钩子函数中监听了textarea的输入事件。通过`binding.value`获取指令的参数，即最大行数，然后在事件处理函数中判断当前行数是否超过最大行数，并禁止输入内容。 需要注意的是，在Vue中，指令只能绑定到元素上，而不能直接绑定到textarea的`v-model`指令上。因此，我们需要将`v-model`指令绑定到textarea元素上，再使用`querySelector`方法获取textarea元素，并在其上添加`input`事件监听器。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值