分享到微信朋友圈

打开微信,“扫一扫”功能,
即可将网页分享至好友/朋友圈。

文章索引

返回顶部
  / 学习笔记 / JS JQ / 用 getClientRects 获取文本行(textarea自动换行总行数)

用 getClientRects 获取文本行(textarea自动换行总行数)

本文为秃头大叔 小虎的个人博客 原创内容,转载请注明出处,有问题可联系本人!
本文地址:http://www.wuxiaohu.com/2018/04/19/1044.html

想不到我刚说完··getClientRects 这玩意儿估计还是用不到··,自己就庆幸刚刚了解过它,要不还真想不到什么好办法来解决当前面临的问题。

需求:

  1. 未知文本长度
  2. 固定容器宽度
  3. 行高、字体大小未知
  4. 文本自动换行得到的行数

如果只考虑前两点,网上的解决方案一搜一大把,解决思路基本就是:

那为什么这里我就非得加上这么一个未知行高、未知大小的限制呢?

就在今天,有同事告诉我某个方法存在问题,用他测试的方法一看,欸?上面这种方法行不通了,

因为他进行了屏幕缩放(zoom),改变了 Window.devicePixelRatio ,基本问题也都是出现在变小的时候,因为浏览器默认字体是存在最小显示大小的,

本来 16px 的字体大小,在几次缩放之后和 12px 的字体大小一样大,行高自然也不符合设定值了,这就是问题所在!!

getClientRects  ,别躲了,我都瞧见你了····你不就是专门用来计算行内盒子边框的嘛,看看你有几条数据而已···

点击查看结果文字行数:

思路是这样的:

以上源码如下,具体思路还是没错的,这里仅供参考:

html代码:

<div id="w" style="padding-left: 20px; padding-right: 20px;">
    <textarea id="t" style="border: 1px solid #e5e5e5; margin-right: 10px; width: 300px; padding: 5px; min-height: 100px; font-size: 16px;">在这儿输入内容</textarea>
    <span style="color: #00a0d2; cursor: pointer;margin-right:20px;" onclick="act();">点击查看结果</span>文字行数:<span id="r" style="margin-left:10px;"></span>
</div>

js代码:

function act(){
    var $text = document.getElementById("t");
    var $div= document.createElement("div");
    var $span = document.createElement("span");
    var setWidth = $text.offsetWidth - parseInt($text.style.paddingLeft) - parseInt($text.style.paddingRight);
    $div.style.width = setWidth+"px";
    $div.style.position = "fixed";
    $div.style.left = "0";
    $div.style.bottom= "100px";
    $div.style.fontSize = $text.style.fontSize;
    $div.style.wordBreak= "normal";
    $div.style.wordWrap= "break-word";
    $span.innerHTML = $text.value;
    $div.appendChild($span);
    document.body.appendChild($div);
    var lines = $span.getClientRects().length;
    document.getElementById("r").innerHTML = lines;
    $div.parentNode.removeChild($div);
}

那要是自己换行怎么办,回车了还能算正确吗??
当然是····是不能啊····
那就先用通常方法,找出段行分隔符,再一个个用上面的方法,最后相加就是最终结果啦···

终于还是被你发现了

o(* ̄▽ ̄*)ブ  大叔的卖萌!  o(* ̄▽ ̄*)ブ

评论(8)

948
回复

三天两头过来看一看,每次看完都有新体验!

948
回复

炎热夏天,闲来无事,拜读博客,消暑解闷!

1 2

发表评论