我不知道的事--input、textarea

我很庆幸在大学的最后一年能够体验社会,找到一个年轻的团队;我很庆幸刚来公司就可以接触到具体项目并且能够参与进来;我很庆幸这一年来看到自己点点滴滴的进步;我很庆幸在自己迷茫又无措的时候有那么多默默伸出的援手......


昨天在盯着代码发呆的时候有人告诉我,我写的一个页面样式乱掉了。
项目还没有上线,必须马上解决掉。看到页面的时候有些奇怪,我所有的数据都是从后台拿到后通过模板插入的,不可能其他的是好的,只有一条是乱的!于是马上审查元素,发现样式乱掉的那一部分dom结构被改变了,找到对应的填充到那里的数据,原来数据里面含有特殊字符,被html解析成了标签因此改变了我的dom结构。很快的发现了问题,下面就是解决它啦!

由于之前没有碰到过这种情况,经验不足,所以我的第一反应是在模板里面用innerText,果然报错了;转换成字符串?可人家本来就是字符串啊(哈哈,原谅我的无知)!

后来想想好像可以用input来解决这个问题。下面就来说说我用这两个标签所带来的问题......

从后台获取的数据:"/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@"(大神可以看出来这是微信的表情编码,解析另说,我只需要将它原样放在页面上即可)

1.input

将原本包裹这条数据的div标签改成了input标签,并通过css改变了其样式

<input type='text' value='/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@' >

目测是没有问题的,数据正常显示,dom没有错乱。可是好奇宝宝并没有止于此,在控制台里面将value改的老长,此时问题来了,input是单行文本框,是不会自动换行的(原来我早已将这件事抛之脑后了)

尝试着搜了一下input换行的问题,没有搜到怎么换行,只是说可以用textarea实现多行。(哪位大神指导请告诉我,小女子不胜感激~)

2.textarea

于是果断将input换成了textarea,并通过css改变了其样式

<textarea>/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@</textarea>

将标签中的内容输的很长,问题很快就出现了:
1.文本内容过长的时候会产生滚动条;
2.高度不会自适应

这些都是我知道的事,之前没有需求所以没有觉得有什么不妥,看来这次是要解决一下啦~

在我有限的认知范围内当然是先这样:overflow:auto
然而并没有什么效果

然后当然是搜搜搜......

关于这个问题,我找到一些答案,点击这里......

也找到比较好的解决方法,点击这里......

仔细看一看这些问题还是蛮有趣的,不同的视角同一个方向,感觉自己又见识了好多,将这两个链接放在这里,也许每次看的时候都会有新的收获!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,540评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,640评论 2 374
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,643评论 0 326
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,672评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,525评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,387评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,809评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,450评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,743评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,787评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,560评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,406评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,824评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,048评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,335评论 1 253
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,784评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,997评论 2 337

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,210评论 1 41
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,452评论 1 19
  • 【网上说 ,找男朋友一定要找一个把你当女儿疼的,千万不能找一个把你当妈使唤的。所以,有一个像妈一样的男朋友是什么样...
    何又又阅读 11,843评论 5 2
  • 虽然现在的工作不是一份完全意义上的正式工作,但是在开始之前,也是对自己怀着满满的期许,想要做好,尽善尽美。 但是现...
    LenaLi阅读 495评论 0 1