什么是回车&换行

在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33),每秒钟可以打10个字符。但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字符。要是在这0.2秒里面,又有新的字符传过来,那么这个字符将丢失。

于是,研制人员想了个办法解决这个问题,就是在每行后面加两个表示结束的字符。一个叫做“回车”,告诉打字机把打印头定位在左边界;另一个叫做“换行”,告诉打字机把纸向下移一行。

这就是“换行”和“回车”的来历,从它们的英语名字上也可以看出一二。

后来,计算机发明了,这两个概念也就被般到了计算机上。那时,存储器很贵,一些科学家认为在每行结尾加两个字符太浪费了,加一个就可以。于是,就出现了分歧。

Unix 系统里,每行结尾只有“”,即“n”;Windows系统里面,每行结尾是“”,即“ nr”;Mac系统里,每行结尾是“”。一个直接后果是,Unix/Mac系统下的文件在Windows里打开的话,所有文字会变 成一行;而Windows里的文件在Unix/Mac下打开的话,在每行的结尾可能会多出一个^M符号[@more@]

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12059843/viewspace-997335/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/12059843/viewspace-997335/

### 解决方案 在 `element-ui` 中,如果希望实现 `el-input` 组件支持多行文本输入并允许通过回车键自动换行,则需要将其配置为 **textarea 类型** 的输入框。这是因为默认情况下,`el-input` 是单行输入框,在某些浏览器中按下回车键可能会触发表单提交或其他默认行为。 以下是具体实现方式: #### 使用 textarea 类型 可以通过设置 `type="textarea"` 属性来启用多行输入模式。此时,用户可以在输入框中自由地按回车键进行换行操作[^1]。 ```vue <template> <div> <el-form :model="form"> <el-form-item label="请输入内容:"> <!-- 设置 type=textarea 启用多行输入 --> <el-input type="textarea" v-model="form.content" placeholder="请输入内容..." /> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { content: '' } }; }, }; </script> ``` #### 防止修饰符干扰 需要注意的是,如果在绑定数据时使用了 `.trim` 或其他修饰符(如 `.lazy`),这些修饰符可能会影响回车换行功能的正常运行。例如,`.trim` 会在每次更新模型值时移除首尾空白字符,这可能导致换行符被意外删除[^3]。因此建议仅在必要时才使用此类修饰符。 #### 处理特殊场景下的回车事件 对于一些特定需求,比如既想保留多行输入又不想让回车触发表单提交动作,可以监听键盘事件并通过自定义逻辑阻止默认行为[^2]。下面是一个例子: ```vue <template> <div> <el-form :model="form"> <el-form-item label="请输入内容:"> <el-input type="textarea" v-model="form.content" @keydown.enter.prevent.stop="onEnterKey"/> </el-form-item> </el-form> </div> </template> <script> export default { methods: { onEnterKey(event) { console.log('检测到回车', event); // 可在此处执行额外处理逻辑 } }, data() { return { form: { content: '' } }; } }; </script> ``` 上述代码片段中的 `@keydown.enter.prevent.stop` 指令用于捕获回车按键事件,并调用指定的方法同时防止冒泡和默认行为发生。 --- ### 总结 为了使 `el-input` 支持回车自动换行功能,应将其类型设为 `textarea` 并注意避免因修饰符引起的副作用。此外,针对特殊情况可借助 Vue 提供的事件修饰符灵活控制交互体验。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值