前端文本自動換行

2021-08-08 阅读量

输入文本自动换行

解决方案

看到有老哥说用textarea来写入文字可以换行, 没什么好办法了,眼下似乎这个”textarea”就是能做出目标效果的方法,硬着头皮用吧,下午就要交了.

其实我还打算做个限制输入字数的功能的,但是现在还没有想那个的余地,亟待解决的问题是怎么在某一行达到指定字数的时候换行.
那其实有两种办法,
一种是直接限制textarea的height和width尺寸来进行限制,但是对于精确到每行每列多少个字这种需求就不太友好,你随便给个尺寸还得调一调看看这个字能不能盛的下.
|属性| 作用 |
|–|–|
| height | 纵向限制文字,文字超出限制范围会出现纵向滚动条 |
| width | 横向限制文字,文字超出限制范围会出现横向滚动条 |

还有一种是使用textarea自带的属性, cols 和 rows 属性:

属性	作用
cols	文本列数
rows	文本行数
maxlength	字符数量上限
然后出现了滚动条,这必然是不能要的:
属性	作用
–	–
overflow-y:hidden	隐藏纵向滚动条
overflow-x:hidden	隐藏横向滚动条
大体上是能用了,然后细节上的一个问题是牛皮纸背景的最后一行比上面的都要短,再输入那么多文字看着不合适.然后当时也不知道有maxlength属性,就JS获取了textarea的文本长度textarea.value.length,加了判断最后返回false来阻止继续输入:

textArea.onkeydown = () => {
    var rest = 140 - textArea.value.length;
    restText.innerText = "你还能输入" + rest + "字..."
    if (textArea.value.length >= 140) {
        restText.innerText = "盛不下啦喂!"
        restText.style.color = "red";
        return false;
    }
}

这方法也挺不完善的,一旦返回false之后就是直接把textarea给锁了,对,连删除字符都不能进行的.

说实话这里走了个弯路,我今天上午测试了一下textarea里能不能用placeholder属性,结果是不能用(别问,我也不知道我咋测出来的不能用),于是乎只能在textarea下面写了个span加上默认文字,再监听onfocus和onblur:

function defaultValue() {
    textArea.onfocus = () => {
        defaultText.style.opacity = 0;
    }
    textArea.onblur = () => {
        if (textArea.value.length == 0) {
            defaultText.style.opacity = 1;
        }
    }
}

说实话确实写的麻烦了,就因为觉得这个placeholder属性不能用.
(其实是可以正常使用的,而且就像input里那样)
|属性| 作用 |
|–|–|
| placeholder | 默认内容,onfocus时默认内容不消失,输入时消失,onblur重现 |

现在回头看看一个是placeholder属性增添了麻烦,一个是maxlength属性增添了麻烦;

3.补全另一些textarea相关

相关	作用
readonly属性	是否只读不可编辑?
换行	/n
resize属性	如何处置textarea自带的可缩放属性:none彻底不允许缩放,限定max-height,max-width和长宽:限定缩放范围

另外要说一点是textarea是没有value属性的,不要给标签上添加这个属性,但是textarea.value确实能获取到东西,但值是夹在textarea始末标签间的字符;

二、其他方法实现文本换行

1.div可编辑模式

我今天才知道div有个属性叫contenteditable,这个属性的值为true时允许你在这个div上输入文字,这个文字也是夹在始末标签之间的字符;
而且加上这个属性之后,输入的文字依然受到line-height和font系列属性的支持,

<div 
    contenteditable="true" 
    style=`
    line-height:100px;
    height:50px; 
    width:100px;
    background-color:skyblue
`>
    wddw
</div>

在这里插入图片描述
maxlength和placeholder属性无效;
然后你可以看到目前是只能根据宽度width来决定是不是要换行,但是HTML有专门一套规定换行规则的属性,这在input里不能用,可这关我div什么事儿呢 ?
|属性| 可用值 |
|–|–|
| word-break | break-all, normal, keep-all |
| word-wrap | break-word, normal |

属性	作用
word-break:break-all	不管怎么样,到了最大宽度就是要换行!
word-break:normal	使用浏览器默认的换行规则
word-break:keep-all	只能在半角空格或连字符处换行。
word-wrap:break-word	检索英文单词,如果强制换行面临拆词,那么会保留完整词并在其后换行
word-wrap:normal	只在允许的断字点换行（浏览器保持默认处理）。

消减onfocus时的边框

1
2
3

textarea:focus {
    outline: none;
}

总结

就是记录一下,没用过textarea,没甚麽好说的…
你被骗进来了哈哈(啊别打我)