关键词：
输入文本自动换行
一、自嗨
扯皮,不正经向
就是记录一下,没用过textarea,没甚麽好说的…
你被骗进来了 哈哈(啊别打我)
1.
今天拿到老师出的题, 素材里有个图片是饱经沧桑の牛皮纸, 上面有画好的几条线 我要做的就是允许用户往横线上写入文字. 其实前一天半夜就开始想,感觉弄个文本框就行了所以没想太多,结果今天早晨开工属实给我整不会了.
我一开始打算写个文本框,就像我昨晚想的那样,完全没有意识到那两分钟后注定到来的灾难…
" * ,这东西好像不能换行."
查了一下这input标签怎么才能文字换行, 背后的结果令人暖心…
“input不能换行.”
彳亍吧彳亍吧,我拿出了第二个方案是用input来收集文本,然后用innerText和定时器setInerval来直接加入到事先准备好的div里,那时候想这个方案那是怎么想怎么彳亍,但是使用的时候出现一个很大的问题,我在文本框输入,文字直接同步到下面的div,在文本框onfocus的时候会穿帮,乱七八糟的效果非常拉,虽然能做出来但是感觉实在是差强人意…
再到然后,看到有老哥说用textarea来写入文字可以换行, 老实说我不喜欢在正儿八经做东西的时候现学现卖,刚学的东西写起来都挺蛋疼的.
但是没什么好办法了,眼下似乎这个"textarea"就是能做出目标效果的方法,只能硬着头皮用,因为下午就要交作品了.
2.
记得帮平台组做平台部分的时候,软件有个"文本段落"控件,跟这个textarea挺像的,就是你拿鼠标在屏幕上一拖就能拖出来个框,基本就是个缩小版txt页面,支持手动换行,顶格了也会自动换行,完事要是这个文本段落尺寸不足以显示所有文本,它还会生成滚动条,里面是可以容纳无上限的文本的;
不能说是有点相似只能说是一模一样.
其实我还打算做个限制输入字数的功能的,但是现在还没有想那个的余地,亟待解决的问题是怎么在某一行达到指定字数的时候换行.
那其实有两种办法,
一种是直接限制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 | 只在允许的断字点换行（浏览器保持默认处理）。 |
总结
谢谢你读下来啊…
如果您发现了我的不足,欢迎在评论区告诉我.
fabric.js实现文本自动换行(代码片段)
...js中，可以通过 Text 或IText；创建文字，但是文本是无法换行 Fabric.js提供了Textbox类，继承自 IText；Textbox类允许用户调整文本矩形的大小并自动换行。文本框的Y比例已锁定，用户只能更改宽度。高度将根... 查看详情
跨平台应用开发进阶(五十一)：html5（富文本内容）连续数字字母不自动换行问题分析及解决(代码片段)
...展阅读一、前言项目开发过程中，涉及在Web端维护富文本内容，通过APP端查看的相关的功能，功能描述大概如下：通过富文本编辑器添加的内容，通过view展示出来（这里用到了Vue的v 查看详情
跨平台应用开发进阶(五十一)：html5（富文本内容）连续数字字母不自动换行问题分析及解决(代码片段)
...展阅读一、前言项目开发过程中，涉及在Web端维护富文本内容，通过APP端查看的相关的功能，功能描述大概如下：通过富文本编辑器添加的内容，通过view展示出来（这里用到了Vue的v 查看详情
跨平台应用开发进阶(五十一)：html5（富文本内容）连续数字字母不自动换行问题分析及解决(代码片段)
...展阅读一、前言项目开发过程中，涉及在Web端维护富文本内容，通过APP端查看的相关的功能，功能描述大概如下：通过富文本编辑器添加的内容，通过view展示出来（这里用到了Vue的v-html指令）。<viewv... 查看详情
html按钮文本换行，修复宽度，悬停工具提示（bootstrap&css）(代码片段)
微信小程序解决view标签内的文本不能自动换行问题(代码片段)
情景一行文字太多，用view标签包裹时，超出屏幕；解决方法简单粗暴<viewstyle=“overflow-wrap:break-word;”>1232131231232132132132132132132132132132132132112321312312321321321321321321321321321321321321123 查看详情
解决html5（富文本内容）连续数字字母不自动换行
最近开发了一个与富文本相关的功能，大概描述一下：通过富文本编辑器添加的内容，通过input展示出来（这里用到了Vue的v-html指令）。 也是巧合，编辑了一个只有数字组成的长文本，等到展示的时候发现，内容超出了... 查看详情
html自动选择textarea文本(代码片段)
文本自动换行（遇见句号就换行）
HTML代码：<pid="text_desc_p">银河我是在英国威尔士的Pembroke海边看到的。如果你和我一样没怎么见过世面，面对如今这天穹上神迹般的飘带就真的在你眼前的时候，绝对会让你叫出声来。文字说再多都苍白无力。只有亲眼见见... 查看详情
html中啥标签可以让标签内的文字自动换行
...te-space 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 如下：取值:normal|pre|nowrap|pre-wrap|pre-line|inheritnormal:正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)pre:保持HTML源代码... 查看详情
p标签中的文本换行(代码片段)
...normal:默认,被浏览器忽略空白pre:空白被浏览器保留.nowrap:文本不会换行,会在同一行上继续,一直走到需要换行为止pre-wrap:保留空白符序列,但正常换行pre-line:合并空白符 查看详情
r语言ggplot2可视化自动换行适配长文本图例（legend）实战：multiplelinesfortextperlegendlabel(代码片段)
R语言ggplot2可视化自动换行适配长文本图例（legend）实战：MultipleLinesforTextperLegendLabel#导入包及数据处理library(stringr)library(tidyverse)#Createlonglabelstobewrappediris$Species=paste(iris$Species,"randomtexttomakethelabelsmuchmuchlongerthanthe... 查看详情
java15新特性：文本块(代码片段)
大家好，我是DD，今天继续来学点Java的新特性！假设有这样一个场景，我们需要做一个工具。用来自动生成项目文档，文档可以通过浏览器查看，所以最后产出物肯定是一堆html文件。为了让这些html文件更... 查看详情
java15新特性：文本块(代码片段)
大家好，我是DD，今天继续来学点Java的新特性！假设有这样一个场景，我们需要做一个工具。用来自动生成项目文档，文档可以通过浏览器查看，所以最后产出物肯定是一堆html文件。为了让这些html文件更... 查看详情
去除li标签自动换行(代码片段)
通过设置标签属性，去掉无序编号自动换行，代码如下：<!DOCTYPEhtml><html><head><style>#pic_listdisplay:block;white-space:nowrap;width:500px;overflow:auto;#pic_listliwidth:80px;height:80px;margin:3px;ba 查看详情
解决一行文本溢出隐藏点击展开之后全部显示并自动换行每行长度一致问题(代码片段)
一行数据文本内容太多，把页面撑得很长影响美观。该方法可以实现当一行文本内容超过固定长度后，收缩起来，显示一个“展开”按钮，用户一点击后就显示全部内容。当然多行文本也同样适用，（若是全部是中文也可以使用... 查看详情
小记事如何设置vscode代码格式化时不要自动换行(代码片段)
最近一格式化就给我分好多行，好气哦(｀?´)=3在setting.json中添加如下代码："vetur.format.defaultFormatter.html":"js-beautify-html","vetur.format.defaultFormatter.js":"vscode-typ=script","vetur.format.defaultFormatterOptions" 查看详情
JavaFX TextArea如何使用自动换行符设置文本
】JavaFXTextArea如何使用自动换行符设置文本【英文标题】：JavaFXTextAreahowtosettextwithautomaticnewlinebreaks【发布时间】：2016-06-1806:33:42【问题描述】：在我的应用程序中，我使用了两个Tabs。在第一个中我放置了一个HtmlEditor，在第二个... 查看详情