键盘 - 隐藏收起键盘的N种方法

这篇博客介绍了在iOS开发中收起键盘的多种方法,包括点击编辑区域外的视图、使用UIControl、制作收起键盘按钮以及解决键盘遮挡问题。通过这些方法,开发者可以更灵活地管理UITextField和UITextView的键盘显示状态。
部署运行你感兴趣的模型镜像

TextField   &  TextView   收起键盘的方法有很多,但总的来说就是释放第一响应者和结束编辑即可。


1、点击编辑区域以外的地方收起键盘


UIVlew 中收起键盘

这是一种很直觉的方法,当不再需要使用虚拟键盘时,只要点击虚拟键盘和编辑区域外的地方,就可以将键盘收起,下面程式码是在 UIView 中内建的触碰事件方法函式,您可以参考 Touch Panel / 触碰萤幕 / 压力感应器的基本使用方式一文,找到更多关于触碰事件的方法函式。

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{  
    if (![myTextView isExclusiveTouch]) 
      {  
        [myTextView resignFirstResponder];  
      }  
}

如果要使用此方式请务必记得,你操作画面的 Custom Class 一定要是 UIView 才行。

画面的 Custom Class 为 UIView


UIControl 中收起键盘

收起虚拟键盘的方式与前一种相同,但是如果你的触碰事件里已经且写满了程式码,那么就可以考虑使用,UIControl 的 Touch Up Inside 事件来收起键盘,方法是将以下程式码与 UIControl 的 Touch Up Inside 事件连结即可。

- (IBAction)dismissKeyboard:(id)sender
 {  
    [myTextView resignFirstResponder];  
}

如果要使用此方式请务必记得,你操作画面的 Custom Class 一定要是 UIControl 才行。
 画面的 Custom Class 为 UIControl

 将收起键盘的方法与 UIControl 事件连结


最简单粗暴的,只要在任何UIView子类结束编辑即可;

在一个ViewController收起键盘的方法如下;

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event  
{  
    [self.view endEditing:YES];  
}

或者释放编辑框TextField(TextView同理)的第一响应者即可,实现手段很多;

>1.TextField点击Reture收起键盘

步骤,实现委托代理协议,释放第一响应者

   self.textField.delegate = self;  
-(BOOL)textFieldShouldReturn:(UITextField *)textField  
{    
    [self.textField resignFirstResponder];  
   return YES;  
}


>2.TextView点击Reture收起键盘

步骤,实现委托代理协议,释放第一响应者

  self.textView.delegate=self;  
- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text
{
  if ([text isEqualToString:@"\n"])
     {
        [textView resignFirstResponder];
        return NO;
     }
    return YES;
}

>3.在ViewController的self.view上添加一个top单击手势,当点击空白的时候,释放  输入框的第一响应者即可;

>4.背景设置一个UIButton,给Button一个回调,当点击按钮的时候释放键盘的第一响应者,同上;


2、使用制作收起键盘的按钮

当没有编辑区域以外的地方可供点击来收起键盘,自己制作一个按钮来收起目前的虚拟键盘,也是一个不错的方法,由于按钮必须在虚拟键盘出现才能显示于画面上,因此必须借用 NSNotificationCenter 来帮助我们判断目前键盘的状态。
首先在 viewDidLoad: 事件中,向 NSNotificationCenter 进行註册,告诉 NSNotificationCenter 我们的 doneButtonshow: 方法函式。


- (void)viewDidLoad 
{  
   [super viewDidLoad];  
   [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector (doneButtonshow:) name: UIKeyboardDidShowNotification object:nil];  
}

现在每当虚拟键盘出现时,就会自动呼叫我们自定义的 doneButtonshow: 方法函式,接下来只要在该方法函式里定义按钮出现的方法即可。

-(void) doneButtonshow: (NSNotification *)notification 
{  
   doneButton = [UIButton buttonWithType: UIButtonTypeRoundedRect];  
   doneButton.frame = CGRectMake(0, 228, 70, 35);  
   [doneButton setTitle:@"完成编辑" forState: UIControlStateNormal];  
   [doneButton addTarget: self action:@selector(hideKeyboard) forControlEvents: UIControlEventTouchUpInside];  
   
   [self.view addSubview:doneButton];  
}

最后是实作按钮按下去时的 hideKeyboard: 方法函式,务必记得要在函式中移除该按钮。

-(void) hideKeyboard
 {  
   [doneButton removeFromSuperview];  
   [myTextView resignFirstResponder];  
}

3、使用判断输入子元

如果要使用输入特定字元(例如 return 换行字元)来收起键盘,必须先在类别内的 @interface 区段採用  协定,您可以参考 Protocol 协定的使用方式一文,获得更多关于协定的资讯。
在采用  协定之后,接着实作出协定内的 textView:shouldChangeTextInRange:replacementText:方法函式,此方法函式会在字元输入时触发,而回传的 BOOL 值则代表该字元是否要作用,下列程式码就是在此方法函式中,使用判断输入字元的方式来收起虚拟键盘(判断字元为 return 换行字元)。


- (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text 
{  
    if ([text isEqualToString:@"\n"])
    {  
        [myTextView resignFirstResponder];  
        return NO;  
    }  
    return YES;  
}

最后别忘记在 viewDidLoad: 事件中,将 UITextView 的代理物件指向自己,这样程式才能正确找到实作  协定方法函式的类别。

- (void)viewDidLoad 
{  
    [super viewDidLoad];  
    myTextView.delegate = self;  
}

4、关于键盘的遮蔽问题

如果您在实作上有遭遇到键盘遮蔽编辑区域的问题,可以参考使用 Animation 解决小键盘挡住 UITextField 的问题一文,透过 Core Graphic 的 Animation 功能,在键盘出现时同时移动编辑区域来解决遮蔽的问题。





您可能感兴趣的与本文相关的镜像

EmotiVoice

EmotiVoice

AI应用

EmotiVoice是由网易有道AI算法团队开源的一块国产TTS语音合成引擎,支持中英文双语,包含2000多种不同的音色,以及特色的情感合成功能,支持合成包含快乐、兴奋、悲伤、愤怒等广泛情感的语音。

<think>好的,我现在需要帮用户解决在Vue3中使用Vant组件库实现车牌号软键盘的问题。首先,我得理解用户的需求。用户希望有一个示例教程,展示如何结合Vue3和Vant来实现这个功能。根据提供的引用内容,特别是引用[2]提到的移动端VUE车牌键盘,虽然简单但适合小白,这可能是一个起点。 首先,我需要考虑Vant组件库中的哪些组件适合用来构建软键盘。Vant提供了NumberKeyboard数字键盘组件,这可能是一个基础。但车牌号不仅有数字,还有省份简称的字母,所以可能需要自定义部分。用户提到的支持不同车辆类型,比如新能源、警车等,可能需要切换不同的键盘布局。 接下来,步骤应该是: 1. 安装Vant:确保用户已经正确安装Vant到Vue3项目中,可能需要使用Vant4版本,因为Vue3和Vant4兼容。 2. 创建车牌输入组件:使用Vant的Field组件作为输入框,显示车牌号,并触发键盘弹出。 3. 自定义键盘布局:结合Vant的NumberKeyboard,但需要添加省份选择(可能是弹出式Picker)和字母部分。可能需要自己布局按钮,比如使用Grid栅格布局。 4. 处理输入逻辑:包括省份选择、字母和数字的输入,以及删除功能。同时需要正则验证,比如引用[1]提到的正则验证规则。 5. 切换键盘类型:比如新能源车牌比普通车牌多一位,可能需要切换不同的键盘模式,或者动态调整输入长度限制。 6. 样式调整:确保键盘和输入框的样式适配移动端,可能需要自定义样式覆盖Vant默认样式。 可能的难点在于省份选择和字母键盘的切换。例如,当用户点击输入框时,首先弹出省份选择,选择省份后切换到字母和数字键盘。或者,将省份作为键盘的一部分,比如第一行显示常用省份简称,然后下面是字母和数字。 另外,正则验证部分需要根据不同的车牌类型来调整。例如,普通车牌的格式是省份+字母+5位字母或数字,而新能源可能是省份+字母+更多位。需要参考引用[1]中的正则规则,但用户提供的引用中没有详细的正则表达式,可能需要自行补充或建议用户查找相关正则。 在代码结构方面,可能需要一个Vue组件,包含输入框、键盘、省份选择器。数据部分包括输入的车牌号、当前键盘类型(省份选择或字母数字)、以及车牌类型(普通、新能源等)。方法包括处理按键输入、删除、切换键盘类型等。 测试时需要注意不同车牌类型的输入限制,以及正确触发验证。同时,用户体验方面,输入流畅,键盘弹出和隐藏的时机要合适,比如点击输入框弹出,输入完成后自动隐藏或点击确认按钮隐藏。 最后,示例代码需要简洁明了,注释清楚,方便用户理解每一步的作用。同时,提醒用户可能需要根据实际需求调整样式和验证规则,比如引用[2]提到的简单实现,可能不需要处理所有边缘情况,但至少提供一个可工作的示例。</think>在Vue3中实现车牌号软键盘功能,可以通过Vant组件库的`NumberKeyboard`结合自定义布局完成。以下是分步骤实现方案: --- ### 一、基础环境搭建 1. 安装依赖 ```bash npm install vant@next vue@3 ``` 2. 按需引入组件(在main.js中) ```javascript import { createApp } from 'vue' import { Field, NumberKeyboard, Picker } from 'vant' const app = createApp() app.use(Field) app.use(NumberKeyboard) app.use(Picker) ``` --- ### 二、核心实现代码 ```vue <template> <div class="license-plate-input"> <!-- 输入框 --> <van-field v-model="plateNumber" readonly clickable placeholder="点击输入车牌" @click="showKeyboard = true" /> <!-- 车牌键盘 --> <van-number-keyboard v-model:show="showKeyboard" :extra-key="provinceKey" theme="custom" close-button-text="完成" @blur="showKeyboard = false" > <!-- 自定义省份行 --> <div class="province-row"> <button v-for="(prov, index) in provinces" :key="index" @click="handleProvince(prov)" > {{ prov }} </button> </div> <!-- 自定义字母数字行 --> <div class="char-row"> <button v-for="(char, idx) in currentChars" :key="idx" @click="handleInput(char)" > {{ char }} </button> <button @click="handleDelete">⌫</button> </div> </van-number-keyboard> </div> </template> <script setup> import { ref, computed } from 'vue' const provinces = ['京', '沪', '粤', '浙', '苏', '鲁', '川'] const chars = [ '1','2','3','4','5','6','7','8','9','0', 'Q','W','E','R','T','Y','U','I','O','P', 'A','S','D','F','G','H','J','K','L', 'Z','X','C','V','B','N','M' ] const plateNumber = ref('') const showKeyboard = ref(false) const isProvinceSelected = ref(false) // 动态切换输入模式 const currentChars = computed(() => { return isProvinceSelected.value ? chars : provinces }) const handleProvince = (prov) => { plateNumber.value = prov isProvinceSelected.value = true } const handleInput = (char) => { if (plateNumber.value.length < 8) { // 新能源车牌最多8位 plateNumber.value += char } } const handleDelete = () => { plateNumber.value = plateNumber.value.slice(0, -1) if (plateNumber.value.length === 0) { isProvinceSelected.value = false } } </script> <style scoped> .province-row, .char-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; } button { flex: 1; min-width: 12%; height: 48px; border-radius: 8px; background: #f5f5f5; border: none; } </style> ``` --- ### 三、关键功能解析 1. **双模式切换**:通过`isProvinceSelected`控制省份选择与字符输入两种模式 2. **输入长度限制**:新能源车牌最长支持8位(普通车牌7位) 3. **正则验证**(可结合引用[1]的验证逻辑): ```javascript // 在handleInput后添加验证 const validatePlate = () => { const pattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/ return pattern.test(plateNumber.value) } ``` --- ### 四、高级优化建议 1. **类型切换**:通过`<van-picker>`增加车牌类型选择器(普通/新能源/警用等) 2. **本地存储**:使用`localStorage`记忆用户常用省份 3. **动效优化**:添加键盘弹出/收起动画 4. **语音输入**:集成Web Speech API实现语音识别输入[^2] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值