TextArea禁止输入空格和回车

一车鸡蛋

已于 2022-06-27 10:19:47 修改

阅读量7.8k

点赞数 8

文章标签： css html

于 2021-09-27 18:00:16 首次发布

本文链接：https://blog.csdn.net/realizee/article/details/120512748

版权

当textarea中的文字提交到后台并在非textarea元素中显示时，需要处理/n和/s以保持格式。本文介绍了如何通过监听onKeydown事件禁用空格和回车输入，并提供了一个博客链接，详细讲解了相关内容。对于URL等特殊情况，确保正确处理换行和空格以避免混淆。

摘要由CSDN通过智能技术生成

在textarea 里面，空格和换行会被保存为/s和/n，如果我们前台输入和前台显示的文字都是在 textarea 里面，其实并不需要做任何处理，你在 textarea 里面编写的样式会按照你之前编辑时候的样式，正确的显示出来。

那么，如果要 textarea 编辑提交的文字，从后台返回之后，不是显示在 textarea 里面，那么就需要考虑处理空格和换行了；

这个情况可以看看下小朋友的博客，写的很赞

处理textarea中的换行和空格 - 下小朋友 - 博客园

又或是，一大段url 提交后传到后台空格和换行的/s和/n 与 用户输入的/s和/n混成一个，那就必须要处理空格和换行了。

//监听文本框，禁止输入回车和空格
const handleKeydown=(e)=>{
    if(e.keyCode===32 || e.keyCode===13){
        e.preventDefault();
        return;
    }
}

<Input.TextArea 
    placeholder="请输入"    
    //用onkeydown来监听键盘输入
    onKeyDown={(e)=>handleKeydown(e)} 
>
</Input.TextArea>

onKeydown 事件在用户按下某个键（在键盘上）时发生。

几乎所有 HTML 元素都支持这个事件，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title>

其实没想到被antd封装过的也可以，只是试一下j竟然成功了，很完美哈哈哈哈哈

一车鸡蛋

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
TextArea禁止输入空格和回车

在textarea 里面，空格和换行会被保存为/s和/n，如果我们前台输入和前台显示的文字都是在 textarea 里面，其实并不需要做任何处理，你在 textarea 里面编写的样式会按照你之前编辑时候的样式，正确的显示出来。那么，如果要 textarea 编辑提交的文字，从后台返回之后，不是显示在 textarea 里面，那么就需要考虑处理空格和换行了；这个情况可以看看下小朋友的博客，写的很赞处理textarea中的换行和空格 - 下小朋友 - 博客园又或是......
复制链接

扫一扫