禁止表情输入和长度限制

最新推荐文章于 2024-05-08 12:14:16 发布
原创 最新推荐文章于 2024-05-08 12:14:16 发布 · 置顶 · 4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#表情 #文本长度 #EditText

本文介绍了在EditText中如何同时禁止表情输入并实现文本长度限制。问题源于默认的maxLength过滤器被setFilters方法覆盖。解决方法是在设置新过滤器时保留原有的长度过滤器，通过obtainStyledAttributes获取XML中定义的maxLength属性值，动态设置限制。提供了一个自定义的EmojiEditText类实现这一功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 前言

    现在好多人聊天喜欢输入表情， 所以在开发中测试人员也习惯去测试编辑框输入表情，经常出现数据提交失败。然而好多的编辑并不需要表情的或表情符时，这时我们就需要去禁止用户输入表情。

  • 问题

    当我们使用setFilters方法过滤表情输入之后，而且通过maxLength增加文本输入字数限制时，两个就不能同时生效了。

  • 原因

    因为默认EditTextView是有一个关于maxLength的过滤器的，我们通过setFilters的参数是一个新数组，就覆盖了原来的长度过滤器，所以maxLength就不能生效了，源码：
    这里写图片描述

  • 解决办法

    解决办法很简单，就是在设置过滤器时把原来的过滤器拼接到新的数组中去，然后setFilters就ok了：
    editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(maxLength), emojiFilter});
    很多人马上就发现这个有个缺点，就是xml里面配置的maxLength就没什么用了，每次都需要在代码中去动态配置这个长度限制。其实解决这个问题也很简单：
    方法1：通过反射获取maxLength属性的值，这里我就不讲了。
    方法2：我们重点讲怎么通过obtainStyledAttributes获取到xml中到maxLength属性值，大家经常自定义属性

最低0.47元/天 解锁文章

200万优质内容无限畅学
使用RichEditor，应用实现最大显示字数的设置，输入emoji超出最大字数限制，导致emoji被截断，如何处理？
**My Coding Family**
05-15 954
🏆 本文收录于《全栈Bug调优(实战版)》专栏，致力于分享我在项目实战过程中遇到的各类Bug及其原因，并提供切实有效的解决方案。无论你是初学者还是经验丰富的开发者，本文将为你指引出一条更高效的Bug修复之路，助你早日登顶，迈向财富自由的梦想🚀！同时，欢迎大家关注、收藏、订阅本专栏，更多精彩内容正在持续更新中。让我们一起进步，Up！Up！Up！    备注： 部分问题/难题源自互联网，经过精心筛选和整理，结合数位十多年大厂实战经验资深大佬经验总结所得，数条可行方案供所需之人参考。
UITextView限制字符长度和过滤表情
王正魁
08-24 418
给UITextView 添加PlaceHolder [self.addressTextView jk_addPlaceHolder:@"请输入"]; #pragma mark -- UITextViewDelegate -- - (BOOL)textViewShouldBeginEditing:(UITextView *)textView{ self.labelContents.hidden = YES; return YES; } - (BOOL)te...
flutter_emoji_keyboard:在flutter框架中仅用于表情符号的键盘
04-17
emoji_keyboard 可以输入表情符号的键盘 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
输入框禁止输入表情符
xiaoliu665114的博客
11-28 1512
输入框中禁止输入表情符的做法 - (void)textFieldDidChange:(UITextField *)textField { NSRegularExpression *regularExpression = [NSRegularExpression regularExpressionWithPattern:@"[^\\u0020-\\u007E\\u00A0-\\u00BE
输入框中-------禁止输入表情
qq_25657125的博客
12-12 5438
最近遇到了一个需求，就是在设置账号名称中禁止输入表情,就把该知识点整理了一下，记录以便下次查找. 可能还有不完善之处，请各位补充。 方法1:此方法个别表情识别不出来   比如我的华为手机 电话表情 不能识别   //此方法个别表情识别不出来 比如我的华为手机 电话表情 不能识别 //去除表情规则 // \u0020-\\u007E 标点符号，大小写字母，数字 // \u00...
flutter过滤emoji正则表达式
攻城狮for Android
05-20 4620
坑爹的flutter正则； emoji过滤正则表达式："[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\r\n]" RegExp regexp=RegExp("[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\u
Flutter之TextField输入长度限制
qw656567的博客
03-31 5617
Flutter之TextField输入长度限制
Kotlin实现EditText限制禁止输入emoji表情,以及限制输入内容的长度
weixin_44791944的博客
12-12 1036
布局如下: <EditText android:id="@+id/ed_exchange_reason" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margi...
使用UITextField限制只可输入中,英文,数字的方法
09-01
综上所述，通过组合使用UITextField的代理方法和NSPredicate的正则表达式功能，我们能够限制用户只能在UITextField中输入特定的字符，从而满足开发中对输入字符类型的特定需求。需要注意的是，这种方法依赖于...
Flutter - TextField遇到emoji表情时字数计算错误问题
操作猛如虎的博客
09-21 512
Flutter - TextField遇到emoji表情时字数计算错误问题
flutter-emoji：:package:适用于Flutter的轻量级Emoji with，带有所有最新emoji s。 由:hundred_points:％:hot_beverage:与:red_heart:制成！
02-05
flutter_emoji :backhand_index_pointing_right: 轻巧的表情符号 :package: 适用于带有所有最新表情符号的Flutter :grinning_face_with_smiling_eyes: 。 由...制成 :hundred_points: ％ :hot_beverage: 与 :red_heart: ！ 灵感来自于包。 安装 将此添加到pubspec.yaml dependencies: flutter_emoji: ">= 2.0.0" API用法 首先，导入包： import 'package:flutter_emoji/flutter_emoji.dart'; 您需要了解两个主要的类来处理Emoji文本： Emoji和EmojiParser 。 基本上，您需要初始化EmojiParser的实例。 var parser = Em
解决聊天界面，软键盘和表情框切换问题
08-20
解决聊天界面，软键盘和表情框切换问题，类似微信聊天界面，可以获取软键盘的高度，并解决输入框弹出时，listview显示最后一条消息。
关于flutter使用extended_text_field来让表情显示在输入框中
Wuxiaoming135的博客
05-08 1141
关于flutter使用extended_text_field来让表情显示在输入框中
不让textView和textField输入表情
weixin_44526067的博客
06-14 400
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string { if ([self stringContainsEmoji:string]) { return NO; ...
过滤输入法的表情
xiangzhihong8的专栏
06-26 1775
所以为了防止用户胡乱输入表情、同时限制用户只能输入应用自带的表情。编写了一个自定义控件来禁止输入的表情。 代码如下： [java] view plaincopy package com.qd.widget;    import android.content.Context;  import android.text.InputFilter;  import an
flutter 自定义键盘_Flutter 完美的验证码输入框
weixin_39941847的博客
11-30 442
老孟导读：刚开始看到这个功能的时候一定觉得so easy，开始的时候我也是这么觉得的，这还不简单，然而真正写的时候才发现并没有想象的那么简单。 先上图，不上图你们都不想看，我难啊，到Github：https://github.com/781238222/flutter-do 上给个小星星可还行，如果能fork一下，那更是感激不尽。 言归正传，完成验证码输入...
Android EditText限制字符数，最后一个表情截断 报cannot be utf-8 encoded
人生只是一种体验，不必用来演绎完美。
08-14 359
输入文本限制20个字符，中文(2字符)、英文(1个)、表情(2个)都可以。 出现问题的先提条件： 前19字符个输入字母或数字，最后一个汉字是没有问题的。就不会显示上去。 但是最后输入表情就会被截断。显示乱码。 就是这样的效果：466464464646646666� 正常时应该跟文字同样的效果，不会显示上去。 然后追踪逻辑： 文字： 表情： InputFilter[] mFilter = { n...
EditText 禁止输入表情包的正则表达式
LeakCollector的博客
08-07 1918
EditText 禁止输入表情包的正则表达式 InputFilter emojiFilter = new InputFilter() { Pattern emoji = Pattern.compile("[\ud83c\udc00-\ud83c\udfff]|[\ud83d\udc00-\ud83d\udfff]|[\u2600-\u27ff]", ...
Flutter 开发笔记 —— TextField
周末
10-28 1439
1、TextField赋初始值，在创建Controller的即赋值 ///对应创建TextEditingController for (int i = 0; i < items.length; i++) { _controllerLists .add(TextEditingController(text: items[i].patchNum.toString())); _focusList.add(FocusNod
uniapp input禁止输入表情
最新发布
06-27
<think>我们正在UniApp中实现禁止输入表情符号的功能。根据提供的引用，我们可以使用正则表达式来过滤掉表情符号。在UniApp中，我们可以通过监听输入事件（如input或blur）并在事件处理函数中替换掉表情符号来实现。引用[3]中提供了两种正则表达式：1.只禁止表情，但允许特殊字符：/[\ud800-\udbff][\udc00-\udfff]/g2.禁止表情和特殊字符，只允许中文、英文、数字、标点符号等：/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g根据需求，我们可能只需要禁止表情符号，而允许其他字符（包括特殊字符）。因此，我们选择第一种正则表达式。在UniApp中，我们通常使用Vue的语法，可以通过在input或textarea组件上绑定@input事件，然后在事件处理函数中过滤输入值。步骤：1.在模板中，给input或textarea组件添加@input事件监听，并绑定一个方法（例如：onInput）。2.在onInput方法中，获取当前输入的值，然后使用正则表达式替换掉表情符号。3.将过滤后的值重新赋给绑定的变量。注意：由于UniApp中可能使用不同的表单组件，这里以原生input组件为例（实际上UniApp中常用的是<input>或<textarea>，也可能使用uni-easyinput等组件）。示例代码（使用原生input组件）：```html<template><view><inputtype="text":value="inputValue"@input="onInput"/></view></template><script>exportdefault{data(){return{inputValue:''};},methods:{onInput(event){//获取输入的值letvalue=event.detail.value;//使用正则表达式替换掉表情符号value=value.replace(/[\ud800-\udbff][\udc00-\udfff]/g,'');//将过滤后的值重新赋给变量this.inputValue=value;//注意：由于我们直接修改了输入值，可能需要手动触发一次输入框的更新（因为我们已经修改了绑定值，所以视图会更新）//但是，如果使用v-model，我们这样修改inputValue，输入框会更新，但注意可能会出现光标位置问题。}}};</script>```如果使用v-model，我们可以这样写：```html<template><view><inputtype="text"v-model="inputValue"@input="onInput"/></view></template><script>exportdefault{data(){return{inputValue:''};},methods:{onInput(event){//因为v-model绑定了inputValue，所以我们不需要通过event.detail.value获取，可以直接使用this.inputValue//但是注意：@input事件触发时，v-model已经更新了inputValue，所以我们可以直接处理this.inputValue//但是这样处理会导致两次赋值（一次v-model的自动更新，一次我们自己的赋值），所以我们可以直接处理event.detail.value，然后赋值给this.inputValueletvalue=event.detail.value;value=value.replace(/[\ud800-\udbff][\udc00-\udfff]/g,'');this.inputValue=value;}}};</script>```另外，引用[4]提到了使用自定义指令的方法。在Vue中，我们可以创建一个自定义指令，这样可以在多个输入框上复用。在UniApp中，我们也可以使用自定义指令。自定义指令示例（在UniApp中）：1.创建一个自定义指令文件（如emoji.js）：```javascript//emoji.jsexportdefault{inserted(el){el.addEventListener('input',(e)=>{constvalue=e.target.value;//过滤表情constnewValue=value.replace(/[\ud800-\udbff][\udc00-\udfff]/g,'');if(newValue!==value){e.target.value=newValue;//触发input事件，让v-model更新e.dispatchEvent(newEvent('input'));}});}};```2.在main.js中注册指令：```javascriptimportemojiDirectivefrom'./directives/emoji.js';//注册全局指令Vue.directive('emoji',emojiDirective);```3.在组件中使用：```html<inputv-model="inputValue"v-emoji/>```注意：自定义指令中，我们监听了输入框的input事件，并在事件中过滤表情，然后更新输入框的值并触发input事件以确保v-model同步。但是，需要注意的是，UniApp的环境可能对自定义指令的支持存在差异，特别是在小程序端。因此，如果使用自定义指令在小程序端不生效，建议使用事件监听的方式。另外，如果使用uni-easyinput组件，我们可以通过监听@input事件来实现，方法同上。总结：在UniApp中禁止输入表情符号，我们可以通过监听输入框的input事件，使用正则表达式替换表情符号来实现。也可以考虑封装成自定义指令，但需注意跨平台兼容性。根据需求选择合适的方法。注意：正则表达式/[\ud800-\udbff][\udc00-\udfff]/g用于匹配表情符号（Unicode代理对），这是匹配表情符号的一种常用方法。最后，如果遇到问题，可以尝试使用引用[3]中提到的第二种正则表达式（如果希望同时过滤掉特殊字符），但这里我们只需要过滤表情，所以使用第一种。另外，由于输入法输入表情时，可能会在输入过程中就触发input事件，所以实时过滤是可行的。我们还可以结合maxlength属性来限制输入长度，如引用[3]所示。因此，实现方法有两种：方法一：在@input事件中处理（推荐，兼容性好）。方法二：使用自定义指令（代码复用性好，但注意平台兼容性）。根据具体情况选择。</think>### UniApp中禁止输入表情符号的实现方法 在UniApp中禁止输入表情符号，可以通过以下两种常用方法实现： #### 方法一：使用正则表达式过滤（推荐） 在`@input`事件中通过正则表达式实时过滤表情符号： ```html <template> <input v-model="inputValue" @input="filterEmoji" placeholder="请输入内容" /> </template> <script> export default { data() { return { inputValue: '' } }, methods: { filterEmoji(event) { // 使用正则表达式过滤表情符号 this.inputValue = event.detail.value.replace( /[\uD800-\uDBFF][\uDC00-\uDFFF]/g, '' ); } } } </script> ``` **正则说明**： - `\uD800-\uDBFF`：匹配Unicode代理对的高位代理 - `\uDC00-\uDFFF`：匹配Unicode代理对的低位代理 - 组合`[\uD800-\uDBFF][\uDC00-\uDFFF]`可匹配所有4字节的Unicode字符（包括表情符号） #### 方法二：使用自定义指令（全局复用） 1. 创建`emoji-directive.js`文件： ```javascript // emoji-directive.js export default { inserted(el) { el.addEventListener('input', (e) => { const value = e.target.value; const filtered = value.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, ''); if (value !== filtered) { e.target.value = filtered; e.dispatchEvent(new Event('input')); // 触发v-model更新 } }); } } ``` 2. 在`main.js`中注册指令： ```javascript import emojiDirective from './emoji-directive.js'; Vue.directive('emoji', emojiDirective); ``` 3. 在组件中使用： ```html <input v-model="text" v-emoji /> ``` ### 注意事项 1. **平台兼容性**： - 上述方法在H5和小程序端均有效 - 安卓/iOS原生输入法表情均可过滤 2. **特殊场景处理**： - 若需要同时过滤特殊字符，可扩展正则： ```javascript /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g ``` - 结合`maxlength`属性限制输入长度[^3] 3. **光标位置问题**： - 过滤后可能造成光标跳动，可通过`setTimeout`微调： ```javascript setTimeout(() => { this.inputValue = filtered }, 0); ``` ### 实现原理 表情符号在Unicode中属于**代理对字符**（Surrogate Pair），占用4字节（普通字符占2字节）。通过匹配代理对范围`\uD800-\uDFFF`，可精准识别并移除表情符号[^3]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值