首页
学习
活动
专区
圈层
工具
发布

使用 white-space属性 来实现保留文本域 textarea的换行格式和空格格式

背景 昨天产品需求评审,产品经理收到用户的反馈,在系统中有一些文本域,用户希望在在文本中填写的文本内容和格式都能够被保留下来,目前只能保存文本内容,对于文本域的换行和空格,在显示的时候都没有正确显示。...接到这个需求,我搜索了一下,网上大多数是获取文本域的内容后,将其中的换行符,空格替换成html标签,如, 使用JavaScript处理,然后将这些数据转化后,保存的后端,在显示时,使用innerHTML...white-space 属性解释 下面是white-space的几个值其及其解释 属性 换行符 空格和制表符 文字换行 行尾空格 normal 合并 合并 换行 删除 nowrap 合并 合并 不换行...演示demo 此外我还专门写了一个简单的demo来演示使用white-space来正确显示文本域中的文本格式。...id="myinput" style="height: 200px; width: 200px;">textarea> 提交<

6.3K196

jQuery的基本操作

(name|porperties|key,value|fn) //概述 //设置或返回被选元素的属性值· name 属性名称 properties 作为属性的"名/值对"对象 key,value...属性名称,属性值 key,function(index,attr) 1·属性名称 2·返回属性值得函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值· name描述: 返回文本中所有图像的...src属性值· jQuery代码 $("img").attr("src") properties描述: 为所有图像设置src和alt属性· jQuery代码 $("img").attr({src...});   removeAttr //概述 //从没一个匹配的元素中删除一个属性 1.6以下版本在IE6使用jQuery的removeAttr方法删除disabled是无效的· 1.7版本在IE6下已支持删除...,jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误· name 属性名称 properties 作为属性的"名、值对"对象 key,value 1·属性名称 2·返回属性值的函数

8.8K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JSONP原理以及示例(jsonp示例)

    JSONP原理 首先我们需要明白,在页面上直接发起一个跨域的ajax请求是不可以的,但是,在页面上引入不同域上的js脚本却是可以的,就像你可以在自己的页面上使用 标签来随意显示某个域上的图片一样...因此,对于一些需要对安全性有要求的跨域请求,JSONP的使用需要谨慎一点了。 JSONP不支持用async:false的方法设置同步。...2、指定回调函数: 可以通过jsonpCallback属性指定函数的名称,然后显示的将指定的jsonp回到函数写到下(默认属于window对象),或window对象里。...属性,来指定回调函数的参数名称,默认是callback。...jsonpCallback: “showData”, //指定回调函数名称 4、看看jquery的jsonp是否支持POST方式: jsonp方式不支持POST方式跨域请求,就算这里指定成POST方式,

    97810

    与Ajax同样重要的jQuery(1)

    DOM对象属性方法,DOM对象也无法使用jQuery对象属性方法。...但是我们可以使用jQuery提供方法,将DOM对象通过jQuery()函数包装成为jQuery对象,同样我们可以把jQuery对象转化成DOM对象。...①:基本选择器 根据元素id属性、class属性、元素名称 对元素进行选择 id选择器: $("#元素id属性") class选择器: $(".元素class属性") 元素名称选择器:$("元素名称")...多个选择器同时使用 selector1,select2 例如 : $("#xxid ,.xxxclass") 同时选择id 和 class匹配两类元素 练习1: ² 通过each() 在每个div元素内容前...⑧:表单过滤选择器 选取表单元素的过滤选择器 :input 选取所有、textarea>、和元素 :text 选取所有的文本框元素 :password

    11.5K60

    Web前端JQuery面试题(二)

    Web前端JQuery面试题(二) Web前端JQuery面试题(二) 1.请写出jquery的语法?...基本选择器: #id 根据给定的id进行匹配一个元素 element 根据给定的元素名进行匹配所有元素 .class 根据给定的类匹配该类的所有元素 * 匹配所有元素 selector1,selector2...匹配给定的元素,合并一起 层次选择器: ancestor descendant 根据祖先元素匹配所有后代的元素 祖先和后代的关系 parent > child 根据父元素匹配所有的子元素 父子的关系...*= value] 匹配有包含某些值的特定元素 [selector1][selector2] 同时满足多个条件使用 子元素过滤选择器: :nth-child 从1开始的,匹配每个父元素下第n个元素...: 可以获取元素的属性和属性值 attr(key,value):可以设置元素的属性 removeAttr():可以删除指定的属性 html(): 获取Html内容 html(val): 设置Html内容

    2.7K30

    Web前端中的命名规则

    本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良....引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js; 5....语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素; 8....重要图片必须加上alt属性; 给重要的元素和截断的元素加上title; 14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能; 15....此条可根据自身习惯书写, 但尽量保证同类属性写在一起.

    2.8K90

    接口测试平台代码实现106:登录态接口-2

    而因为这个接口一个项目基本也就设置一次,所以优化便利性这种事的优先级不高,精力还是留给那些使用频率高的功能上吧 首先是div的样式和标题。...接下来是请求头: 然后是body请求头类型和请求体了,这里我们一样直接复制后 改id。...这里这一大段代码比较麻烦,我们直接复制后,我只标记出id修改的地方,大家把所有id,前面都加上login_这样便于之后区分,逐行检查,千万别落下,不然各种未知bug会出现,大家也可以之后直接复制我的源码...> 这次改动的地方很密集,如果之后使用中出现bug,请及时反馈哦~ 目前显示均正常,除了form-data和x-www....的那俩表格,那俩表格需要我们之后的函数中进行初始化才会正常...这俩个按钮我们照样放在右上角,所以位置应该是在h4标题之上,div的第一个子属性,并且是float属性: 注意onclick调用的函数,也要加login_ ,效果如下: 然后我们还需要一个最重要的部分

    1.2K50

    bootstrapValidator 中文API

    例如,zipCode验证器具有country可以动态更改select元素的选项。...它隐藏错误消息和反馈图标。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素 resetValue 布尔 如果true,该方法将字段值重置为空或删除检查/选择的属性(用于收音机和复选框)。...它隐藏所有错误元素和反馈图标。所有的字段都被标记为未被验证。 参数 类型 描述 resetFormData 布尔 如果true,该方法重置具有验证器规则的字段。...当您需要重新验证其值由其他插件更新的字段时使用它。 默认情况下,一旦该字段已经被验证并被标记为有效的插件,该插件就不会重新验证该字段。当与其他插件一起使用时,字段值被更改,因此需要重新验证。

    14.8K50

    JavaScript实现简单的双向数据绑定

    双向数据绑定最常见的应用场景就是表单输入和提交。一般情况下,表单中各个字段都对应着某个对象的属性,这样当我们在表单输入数据的时候相应的就改变对应的对象属性值,反之对象属性值改变之后也反映到表单中。...相信使用过 jQuery 的人都知道,往往我们在获取到数据之后就直接操作 DOM ,这样数据操作和 DOM 操作就高度耦合在一起了。...如 e-click 就解析为将对应 node 绑定 onclick 事件,e-model 必须绑定在 INPUT 和 TEXTAREA 上,然后监听 input 事件,更改 model 的值,e-bind...$data); })(); } // 如果有 e-model 属性且元素是 INPUT 和 TEXTAREA,我们监听它的 input 事件,更改...function Watcher(options) { // options 属性: // name 指令名称,例如文本节点,该值设为"text" // el 指令对应的DOM元素

    2.4K30

    jQuery选择器大全(48个代码片段+21幅图演示)2

    = value](取attribute属性值等于value或不等于value的元素) 分别为class="item"和class!...attribute *= value](attribute属性值以value开始,以value结束,或包含value值) 在属性选择器中,^$符号和正则表达式的开始结束符号表示的含义是一致的,*模糊匹配...](复合型属性过滤器,同时满足多个条件) 将title以"jQuery"开始,并且class="item"的a标签隐藏,那么jQuery事件大全" class="item...表单对象属性过滤选择器 ——6.1 :enabled和:disabled(取可用或不可用元素) :enabled和:diabled的匹配范围包括input, select, textarea。...:file(取上传域元素) :file选择器和属性选择器$('input[type=file]')等同 9.

    2.1K80

    html+css+js实现文本编辑器

    html+css+js实现文本编辑器 简介:本文讲解,如何制作使用html+css+js实现一个好看的文本编辑器。...当失去文本框焦点的时候,那么就隐藏textarea,显示div,使用div来显示这个文本的内容,更加的专业。.../js/jquery-3.3.1.min.js"> // 默认文本聚焦的 var editor1 =document.getElementById(...,这里就需要用到min-height这个属性,这个属性就是给这个div盒子指定一个默认的最小大小,当这个大小大过这个最小值的时候,那么就高度根据内容自适应。...第二个难点就是聚焦和失去焦点的问题,这里就要好好的看一下我的js部分是怎么处理的,其实原理并不困难,先默认div隐藏,textarea获得焦点,然后了当div获得焦点的时候,textarea隐藏,当div

    88800
    领券