最初发现的问题是,IE 浏览器中 textarea 聚焦时敲击回车,光标不换行,视觉上只是生成了一个空格。一开始我把问题归咎于 IE 对这个标签支持不够完善,但查看其 DOM 结构以及获取其值后,我发现都是正常换行的,所以才开始一个个排查样式,最终确认是 white-space: normal 导致的。
- IE
textarea + white-space: normal表现
IE 浏览器 - 非 IE
textarea + white-space: normal表现
非 IE
测试代码
<!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">
<style>
.test {
white-space: normal;
}
</style>
</head>
<body>
<textarea cols="30" rows="10" class="test"></textarea>
</body>
</html>
遂修改 white-space: normal 为 white-space: pre-line,问题得以解决。
删除
white-space属性或则修改为pre-wrap也可以解决该问题,根据实际环境选择。

