最初发现的问题是，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也可以解决该问题，根据实际环境选择。
网友评论