大家好,感谢邀请,今天来为大家分享一下textarea只读的问题,以及和textarea只能输入数字的一些困惑,大家要是还不太明白的话,也没有关系,因为接下来将为大家分享,希望可以帮助到大家,解决大家的问题,下面就开始吧!
随着前端技术的发展,越来越多的网页应用需要实现用户输入限制。今天,我要给大家介绍一个强大的功能——textarea只读。通过运用这个功能,你可以轻松地让textarea控件变成只读状态,从而限制用户输入。接下来,我将详细为大家讲解如何实现这个功能,让你成为前端高手!
一、什么是textarea只读?
在HTML中,textarea是一种多行文本输入框。默认情况下,用户可以在textarea中自由输入和修改内容。而“textarea只读”则是指将textarea控件设置为只读状态,用户只能查看内容,不能进行任何修改。
二、实现textarea只读的几种方法
下面,我将介绍几种实现textarea只读的方法,供大家参考。
1. CSS样式设置
通过CSS样式设置,可以简单地将textarea控件设置为只读状态。以下是一个示例代码:
“`css
.readonly {
background-color: f5f5f5;
cursor: not-allowed;
}
“`
“`html
1、Readonly只针对input(text/ password)和textarea有效。而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。
2、在表单元素使用了disabled后,我们将表单以POST或者GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去
如何让“textarea”不可编辑
在HTML中有2个属性是控制textarea是否可输入\x0d\x0adisabled属性\x0d\x0a该属性规定禁用文本区。被禁用的文本区既不可用,也不可点击;\x0d\x0areadonly属性\x0d\x0a该规定文本区为只读。在只读的文本区中,无法对内容进行修改,但用户可以通过 tab键切换到该控件,选取或复制其中的内容;\x0d\x0a\x0d\x0a上面2个属性有个最大的区别,在提交表单时, disabled属性的控件不会被提交,readonly属性的控件会被提交。\x0d\x0a因此,如果仅仅用于禁止输入(只读,但有用),使用readonly属性\x0d\x0a\x0d\x0a如果是禁止(无用,貌似只读),使用disabled属性\x0d\x0a\x0d\x0a\x0d\x0a在实际的一般很少存在禁止disabled情形,而只读readonly较多
如何让contenteditable元素只能输入纯文本 00 张鑫旭
一、温故而知新
很多年以前,稍等,让我搜一下contenteditable(右上角),哈,是2010年的时候,写了篇文章“div模拟textarea文本域轻松实现高度自适应”,就是说的contenteditable的应用。
虽然说,利用全浏览器都支持的contenteditable模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果,但是呢,有个很大的问题就是HTML内容可以直接被粘贴进去,如下图所示:
之前的文章提到过过滤HTML的方法,保证内容都是纯文本。然而,这种方法的问题在于:
粘贴完毕到过滤结束有时间差,用户很看到内容一闪而过的糟糕体验;
光标的位置会发生变化,不是之前focus的位置了;
当年的我图样图森破,所以,只有上面这种程度。实际上,控制contenteditable元素只能输入纯文本是有体验比较好的方法的。
二、与contenteditable属性无关的CSS控制法
一个div元素,要让其可编辑,也就是可读写,contenteditable属性是最常用方法,做前端的基本上都知道。但是,知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。
主角亮相:user-modify.
支持属性值如下:
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only;
其中,write-only不用在意,当下这个年代,基本上没有浏览器支持,以后估计也不会有。read-only表示只读,就是普通元素的默认状态啦。然后,read-write和read-write-plaintext-only会让元素表现得像个文本域一样,可以focus以及输入内容。
您可以狠狠地点击这里:CSS user-modify属性行为表现demo
会发现,设置了read-write和read-write-plaintext-only值的两个<p>标签元素是可以被focus的:
而这两者的区别就在于,一个可以输入富文本,而下面一个只能输入纯文本,例如,我们从某网页同时复制一段内容粘贴进去看看:
好了,至此,本文标题的答案实际上就已经有了。也就是给元素设置:
user-modify: read-write-plaintext-only
就可以让元素既可以编辑,也只能输入纯文本,表现得就跟textarea文本域一样。
是不是很酷啊!然而,抱歉地跟大家讲下,目前只有webkit内核浏览器才支持read-write-plaintext-only这个值,因此,我们的使用其实是:
-webkit-user-modify: read-write-plaintext-only
我们可以在移动端使用,以及,只需要兼顾webkit内容的桌面网页项目。
三、使用标准contenteditable属性值的HTML控制法
咳咳,提问:在HTML中,contenteditable支持的属性值是?
图样图森破时候的我,脑中就只有contenteditable=”true”和contenteditable=”false”,科科,后来我发现自己太天真了,新的草案中明确表示还有多个其他属性值:
The contenteditable attribute is an enumerated attribute
whose keywords are the empty string(“”),“events”,“caret”,“typing”,
“plaintext-only”,“true”, and“false”. There is one additional state,
the inherit state, which is the missing value default(and the invalid
value default).
垂直展示下就是(不包括默认的inherit继承):
contenteditable=””
contenteditable=”events”
contenteditable=”caret”
contenteditable=”plaintext-only”
contenteditable=”true”
contenteditable=”false”
别问我,我也不知道”events”和”caret”是干什么用的,嘿,但是”plaintext-only”我是知道的,可以让编辑区域只能键入纯文本。这里就不需要demo了,直接下面的框框,大家可以试试,看看能不能搞富文本。
<div contenteditable=”plaintext-only”></div>
如果您发现,居然出乎意料,可以弄进去富文本,那说明你使用的是非Chrome之流的浏览器。
换句话说,contenteditable=”plaintext-only”和CSS只的-webkit-user-modify: read-write-plaintext-only一样,目前仅仅是Chrome浏览器支持比较好的。
所以,您的项目如果还有很多IE8浏览器的用户,我只能替你惋惜,美妙的东西无法立即用上,不得已,寻求下面的方法。
四、控制粘贴paste事件的JS控制法
如果我们单纯地敲击键盘,输入的内容实际上都是纯文本。除了一些特殊情况,例如IE浏览器下的编辑框会自动把合乎条件的url地址自动加上链接。富
文本污染的情况主要出现在复制粘贴的时候,于是,如果我们能在粘贴的时候,对剪切板中的内容进行HTML过滤,再手动插入内容,岂不就可以完美解决无法输
入富文本的问题了吗
关于textarea只读和textarea只能输入数字的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。




