>웹 프론트엔드 >HTML 튜토리얼 >我不知道的事input、textarea_html/css_WEB-ITnose

我不知道的事input、textarea_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-21 08:52:04907검색

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


昨天在盯着代码发呆的时候有人告诉我,我写的一个页面样式乱掉了。项目还没有上线,必须马上解决掉。看到页面的时候有些奇怪,我所有的数据都是从后台拿到后通过模板插入的,不可能其他的是好的,只有一条是乱的!于是马上审查元素,发现样式乱掉的那一部分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然而并没有什么效果

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

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

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.