【项目问题】nz-select多选在输入中文进行搜索的时候，光标在文字左侧（BUG）

已于 2023-01-08 10:10:33 修改
阅读量575 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 项目问题 文章标签： bug 前端 html javascript angular.js
于 2023-01-06 12:11:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46318413/article/details/128575016
在ng-zorro-antd版本9.3.0和@angular/cli版本9.1.11中，当使用多选或标签模式时，输入中文后光标显示异常。解决方案是为.ant-select-show-search.ant-select-multiple.ant-select-selectorinput添加padding:0样式。此问题已在Github上记录并提供了解决方案。

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

文章目录

使用场景

组件
在这里插入图片描述

版本
“ng-zorro-antd”: “^9.3.0”,
“@angular/cli”: “^9.1.11”,

BUG复现

选中输入框，输入中文字，选中不会出现光标，并且输入中文后光标会出现在文字左侧！！！ 输入英文和数字字符的时候没有问题。。。
在这里插入图片描述

在这里插入图片描述

解决办法

.ant-select-show-search.ant-select-multiple .ant-select-selector input {
    padding: 0;
}

Github:Cursor not showing in nz-select when nzMode is “multiple” or “tags” #5704

Select多选
web
12-03 5917
今天写这个select多选，明明很简单的功能，but，因为功能稍微有点复杂，我又粗心大意，导致我的bug不断，整个功能写完后，感觉自己咋就那么蠢呢？啊！气死了，我要反思 我的是angular2项目，使用的NG-ZORRO组件库 普通的select多选 先了解官网的代码 官网示例 官网代码 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-select-multiple', temp
Unix编程/应用问答中文版(转）
热门推荐
04-06 1万+
Unix编程/应用问答中文版 名称 -- Unix编程/应用问答中文版版本 -- 0.04 ( 2003-10-09 外发版 )维护 -- 小四 scz@nsfocus.com>主页 -- http://www.nsfocus.com创建 -- 2001-02-05 13:49更新 -- 2004-02-05 09:23感谢 --感谢C语言的发明者、Unix操作系统的发明者、感谢全世界C程
使用ng-zorro中 下拉 多选nz-select组件 添加搜索全部功能
在路上`的博客
01-21 3346
一、案例描述 需求是下拉支持多选，支持全部，经最后审查，按用户的角度选择全部和其余项目是二选一的，所以便按这个进行开发啦~ 二、解决方法 通过在项目中每条数据添加属性disable的来控制，此处注意的是在每条数据上加，并不是全部 三、事例代码 html <standard-form-row class='standardFormRow' grid last title="项目列表"> <nz-select style="width: 200px;" ngModelChange
nz-select 选择器
陈广晗
05-26 8198
前几太难用到了 nz-select选择器就在这简单的说一下把，最基本的代码 html： <div> <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose"> <nz-optio...
ng-select多选时输入中文时光标靠左
weixin_39436129的博客
07-09 533
项目场景： 组件：下拉框可多选、搜索、清空 版本：“ng-zorro-antd”: “~9.3.0” 问题描述： 仅当nzMode 为 multiple 或 tags 时，才存在以下问题 1、当鼠标聚焦到下拉框时，无光标显示 2、在输入中文进行下拉搜索时，光标是处于文字左边而不是右边，英文及数字均无此状况 <nz-select formControlName="data" nzMode="multiple" (ngModelChange)="onSearch()" nzAllowClear n
ng-zorro的树选择nz-tree-select设置虚拟滚动的总高度和搜索隐藏未匹配的节点后显示有问题
zhaolifang_28的博客
02-15 1064
在使用树选择nz-tree-select组件时设置了可以搜索的功能，并且添加了nzHideUnMatched="true"参数，在添加参数nzDropdownStyle="300px"后发现搜索后的数据显示有问题，搜索的数据没有直接显示在下面，如图所示查找发现是nzDropdownStyle="300px"设置固定高度会导致搜索出的数据在原先位置，需要滑动才能查看到，解决方法修改成[nzDropdownStyle]="{ 'max-height': '300px' }"，修改后代码如下。
nz-select踩坑笔记之光标失效
qq_45832807的博客
12-07 872
实现效果： 解决方法： ::ng-deep { .ant-select-show-search.ant-select-multiple .ant-select-selector input { padding: 0; } }
【STM32F103C8T6调试技巧进阶】：使用ST-Link与Keil实现高效调试
[【STM32F103C8T6调试技巧进阶】：使用ST-Link与Keil实现高效调试](https://amptech.co.nz/image/catalog/Articles/STLinkFWUP-2.JPG) # 摘要 本文系统性地介绍了STM32F103C8T6微控制器的基础知识、调试环境搭建、...
VB速查大全(数据库、表格及报表编程) ★ VB错误处理，ado常见错误，VB数据类型等，网上有很多教程是错的，强烈建议看此文
ecz00的专栏
05-19 8717
VB异常处理 (很重要) ado常见错误 ado游标及锁定介绍 免费报表控件 免费表格控件 vb数据类型(很多程序出问题出在这个，一定要看，VB msdn说的不太对) VB可用的AES加密sqlite_odbc 及 cairo_sqlite (VBRichClient自带的非odbc连接) 有vbRichClient代替winsock、实现vb多线程及远程调用activeX等
【项目问题】NZ-ZORRO的treeSelect组件查询时输入文字出现重叠
Dai的博客
06-12 462
【项目问题】NZ-ZORRO的treeSelect组件查询时输入文字出现重叠
实现select各种搜索功能
08-30
select标签实现各种搜索功能
Angular多选、全选、批量选择操作实例代码
08-31
列表批量选择是一个开发人员经常遇到的功能，列表批量选择的实现方式很多，这篇文章主要介绍了Angular多选、全选、批量选择实例代码，有兴趣的可以了解一下。
Angular 全屏后选择器 (nz-select) 下拉选项框失效【开发笔记】
yuyu的博客
04-13 933
Angular 全屏后选择器 (nz-select) 下拉选择无法使用。
react+antd Select下拉框位置随页面偏移
PYLH7的博客
03-18 3012
<Select style={{width: 200}} getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}> </Select> 根据官方Api，若位置发生偏移，添加getPopupContainer属性，使其依附于其父节点，默认是body
记录一个关于nz-select的奇怪问题
weixin_72233826的博客
01-24 485
最先出现的问题是下拉选择带有背景色且无法选中。后将dbname初始值改为‘‘ ，第一次可选，且下拉正常。选择后打印值为undefined后出现与最先出现的问题一样。
Angular中nz-select实现两个选择框互相关联
m0_51935008的博客
01-25 2805
两个选择框 一个是版本名称 一个是版本号 每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.
nz-select 数据回显失败，大模型救了我一命。
二蛋的博客
09-30 793
nz-select没有回填数据。
给nz-select的nz-option设置样式
smallNut的博客
12-04 3116
今天刚好接到一个需求要求鼠标移到nz-option上时显示option的名字的全称，原因是option的label太长导致无法显示完全 (这里遇到相同问题的话也可以考虑将ng-zorro-antd组件版本升到10，版本10会自带title属性，但是版本升级可能会产生未知的问题所以我没考虑) 这里的话还是需要用到option的自带api nzCustomContent 我的实际代码如下，定义一个自定义模板，将想要进行写的样式放在自定义模板中，这样的话除了添加title属性以外还可以做更多的拓展，即使数据
select2使用模态框，文本搜索框无法输入问题解决
java_MrZHANG的博客
09-20 528
使用模态框，一般都会自动带上一个属性，tabindex="-1",因为这个属性的存在，导致select2的搜索框无法输入，去掉这个属性即可解决。
nz-select多选
最新发布
01-23
### 关于 `nz-select` 组件多选功能的使用方法 #### HTML 部分 为了实现一个多选的 `nz-select` 下拉菜单，HTML 结构应如下所示： ```html <nz-select [(ngModel)]="listOfSelectedValueName" nzPlaceHolder="请选择" style="width: 100%;" name='name2' nzMode="multiple" (ngModelChange)="selectNameChange($event)"> <nz-option *ngFor="let option of listOfOptionName" [nzValue]="option.value" [nzLabel]="option.label"></nz-option> </nz-select> ``` 此部分定义了一个名为 `listOfSelectedValueName` 的双向绑定属性来存储所选值，并设置了占位符文本以及样式宽度。通过设置 `nzMode="multiple"` 属性使得该下拉框支持多项选择[^1]。 #### TypeScript 方法 当用户改变选择时会触发 `(ngModelChange)` 事件并调用相应的处理函数，在本例中为 `selectNameChange()` 函数。下面是一个简单的实现方式： ```typescript selectNameChange(e) { console.log(e); // 输出当前被选中的项组成的数组 } ``` 每当有新的选项被添加到已选项列表或是已有选项被移除时，都会执行上述代码并将最新的状态打印出来以便调试或进一步逻辑处理。 对于更灵活的数据源配置，可以将 `postTypeList` 中的内容转换成字符串形式作为 `<nz-option>` 标签内的 `[nzValue]` 和 `[nzLabel]` 值传递给模板渲染引擎[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Dai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值