input和textarea的区别，及手写div模拟textarea

最新推荐文章于 2024-05-15 09:30:00 发布
最新推荐文章于 2024-05-15 09:30:00 发布
阅读量370 收藏 1
点赞数
文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/center_long/article/details/109724826
版权

区别：

  1. textarea标签是成对的，有结束标签进行闭合，标签的内容写在标签对中间；input是单个标签，标签的内容通过 value属性设置；
  2. textarea的值是纯文本；input的值根据类型不同而不同；
  3. textarea没有type属性；input有多种type来满足表单与用户的数据交互；
  4. textarea的值可以是多行的，并且有rows和cols来控制多行结构；的值是单行的；

模拟textarea

  1. 在div上添加contenteditable="true"使div处于可编辑模式
  2. 给div添加 resize: vertical属性，使用户可以自由拖动高度
  3. 给div添加placeholder属性，作为无内容显示
  4. 通过css获取placeholder并显示出来

Demo

下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
最低0.47元/天 解锁文章
center_long
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jquery给input和textarea设定ie中的focus
10-30
本文将详细介绍如何使用jQuery在Internet Explorer（IE）中为input和textarea设置焦点效果。 首先，我们需要了解CSS中的`:focus`伪类。`:focus`伪类用于选择当前获得焦点的元素，例如被激活的输入框或按钮。在Fire...
textarea标签的使用及案例
lqijlyy的博客
06-14 1万+
textarea标签是我们经常使用的一个html标签，主要是在输入较长的文本时,可以实现换行等效果。下面引用一个他的基本使用： textarea 标签 -- 代表HTML表单多行输入域 textarea标签是成对出现的,以开始,以结束 属性: Common -- 一般属性 cols -- 多行输入域的列数 rows -- 多行输入域的行数 accesskey -- 表单
HTML中的标签textarea的属性及用法
热门推荐
weixin_41044610的博客
03-21 5万+
<textarea>标签定义及用法 1、在html中，<textarea>标签是用来定义一个多行的文本输入控件，在文本输入域中可以输入任意长度的文本。文本默认字体是等宽字体（Courier），可以通过css来改变。 2、在实际应用中，一般会通过cols属性和rows属性来设置textarea控件的尺寸大小（使用 css的height和width属性来设置更佳）。 &l...
HTML textArea元素的使用你知道多少？
最新发布
qq_44327851的博客
05-15 935
下面的三种方法在Enter键提交表单时都要额外处理一下，因为Enter键会换行，这样会带来一定的高度样式的不正确性，所以这时我们可以用。模拟textarea文本域实现高度自适应；scrollHeight手动设置。Enter键换行的默认行为。textArea自适应高度。第二种方法：通过用JS中的。来设置文本域自适应高度；textArea的高度；
小白都能看懂的 textarea 的用法
weixin_40348267的博客
04-21 1255
当在 HTML 表单中需要用户输入多行文本时，会使用 <textarea> 元素，它是一个文本域控件。rows 指定文本域显示的行数，cols 指定文本域显示的列数。今天的内容就是这些了，这就是 textarea 的全部用法了，相信零基础的你已经学会了，将上面的示例复制到编辑器中试试把。通过使用 <textarea> 元素，你可以方便地收集多行文本输入，为用户提供更大的输入空间。2.name：指定文本域的名称，将在提交表单时用作标识字段的名称。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
html之textarea标签、事件冒泡、文本域、回车换行、清除、清空、重置、stopPropagation、querySelector、replace、\n、br、innerHTML
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
06-01 8452
html之textarea标签、事件冒泡、文本域、回车换行、清除、清空、重置、stopPropagation、querySelector、replace、\n、br、innerHTML
【鸿蒙软件开发】文本输入（TextInput/TextArea）
m0_62599305的博客
10-23 6110
TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法参考TextInput、TextArea。TextInput({placeholder:'我是提示文本'})TextInput({placeholder:'我是提示文本'})placeholder参数可以设置提示文本。
CSS样式去除input和textarea点击选中框
01-19
取消input和textarea的聚焦边框： 复制代码代码如下: input{outline:none} 取消textarea可拖动放大： 复制代码代码如下: textarea{resize:none}
JQuery统计input和textarea文字输入数量(代码分享)
10-20
在网页开发中，有时我们需要对用户在`input`和`textarea`输入框中输入的字符数量进行限制和实时统计，以便提供更好的用户体验。本文将详细讲解如何使用jQuery来实现这一功能，具体涉及到的知识点包括： 1. **jQuery...
angularjs使用div模拟textarea文本框的方法
12-29
* div模拟textarea输入框双向数据绑定指令 */ .directive('contenteditable', [function() { return { require: 'ngModel', link: function(scope, element, attrs, ctrl) { //view -> m
处理html中的换行字符“↵”
weixin_47873655的博客
05-31 503
1.textarea赋值 直接把后端返回文本类型通过v-model绑定给textarea，就会有默认的换行，但是问题是textarea可能会在样式上有所不同，他不能随内容高度增加textarea高度实现自适应(可以通过js实现，比较麻烦)，然后就有了第二种方法 2.使用v-html输出文本 <div v-html="value.replace(/(\r\n|\n|\r)/gm, '<br />')"></div> “↵”在html中会识别别为\r,\n等转义字符，所以需
jQuery替换textarea中换行的方法
10-24
主要介绍了jQuery替换textarea中换行的方法,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下
v-model --双向数据绑定
qq_45802159的博客
01-03 3178
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Java中textarea用法,textarea赋值取值与应用详解介绍汇总
weixin_39606396的博客
03-14 5102
一、textarea标签介绍textarea是超文本标记语言html页面中定义的多行文本输入控件标签，也被称作多行文本编辑控件，常作为表单中的元素使用，用户可在其文本区域中写入文本提交到后台程序。textarea属于双标签格式的闭合标签，格式如下：这里写内容， 支持表单组件中 支持的所有的属性、样式和事件。二、textarea标签中的常用属性详解首先，textarea中最常用的属性就属于cols...
textarea相关属性及使用
2302_80277784的博客
05-12 636
什么是textarea标签？在HTML中，像年龄，姓名这种用单行文本框就能搞定，但如果是多行文本，就需要用到textarea标签。textarea标签用于创建多行文本输入框。
【HTML】HTML 表单 ④ ( textarea 文本域控件 | select 下拉列表控件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-22 1381
一、textarea 文本域控件 二、select 下拉列表控件
textarea
梦想阿里
11-27 618
1、cols，垂直列。在没有做样式表设置的情况下，它表示一行中可容纳下的字节数。例如cols=60，表示一行中最多可容纳60个字节，也就是30个汉字。另外要注意的是，文本框的宽度就是通过这个来调整，输入好cols的数值，然后再定义输入文字字体的大小（不定义的话，会采用默认值），那么文本框的宽度就确定了。 2、rows，水平列。表示可显示的行数，例如rows=10，表示可显示10行...
input类型详解
梁燕翠
02-10 1494
标签用于搜集用户信息。 根据不同的type属性值，输入字段拥有很多形式。输入字段可以是文本字段，复选框，源码后的文本控件，单选按钮，按钮等等 注意:并不是所有的主流浏览器都支持新的input类型 Text  fields(文本域) text  fields主要用于用户输入文本，如下所示： 姓名： Passwor
div模拟textarea
05-26
可以使用contenteditable属性来实现div模拟textarea的效果，代码如下： ``` <div contenteditable="true"></div> ``` 通过设置contenteditable属性为true，使得该div可以被编辑，从而模拟出textarea的效果。需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值