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

原创 已于 2023-01-08 10:10:33 修改 · 611 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bug #前端 #html #javascript #angular.js

于 2023-01-06 12:11:25 首次发布
在ng-zorro-antd版本9.3.0和@angular/cli版本9.1.11中，当使用多选或标签模式时，输入中文后光标显示异常。解决方案是为.ant-select-show-search.ant-select-multiple.ant-select-selectorinput添加padding:0样式。此问题已在Github上记录并提供了解决方案。

文章目录

使用场景

组件
在这里插入图片描述

版本
“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 5979
今天写这个select多选，明明很简单的功能，but，因为功能稍微有点复杂，我又粗心大意，导致我的bug不断，整个功能写完后，感觉自己咋就那么蠢呢？啊！气死了，我要反思 我的是angular2项目，使用的NG-ZORRO组件库 普通的select多选 先了解官网的代码 官网示例 官网代码 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'nz-demo-select-multiple', temp
【项目问题】NZ-ZORRO的treeSelect组件查询时输入文字出现重叠
Dai的博客
06-12 532
【项目问题】NZ-ZORRO的treeSelect组件查询时输入文字出现重叠
使用ng-zorro中 下拉 多选nz-select组件 添加搜索全部功能
在路上`的博客
01-21 3501
一、案例描述 需求是下拉支持多选，支持全部，经最后审查，按用户的角度选择全部和其余项目是二选一的，所以便按这个进行开发啦~ 二、解决方法 通过在项目中每条数据添加属性disable的来控制，此处注意的是在每条数据上加，并不是全部 三、事例代码 html <standard-form-row class='standardFormRow' grid last title="项目列表"> <nz-select style="width: 200px;" ngModelChange
XMSelect：汉字下拉搜索的实现与应用
理论都是虚的，代码才是王道。
11-07 835
在Web开发中，我们经常需要处理用户输入的数据，其中一种常见的需求是实现一个支持汉字搜索的下拉选择框。XMSelect是一个功能强大的下拉选择框组件，它支持多种语言和字符集，包括汉字。本文将详细介绍如何使用XMSelect实现汉字下拉搜索，并提供相关实例。通过以上步骤，我们已经实现了一个简单的汉字下拉搜索功能。接下来，我们需要配置XMSelect以支持汉字搜索。首先，我们需要在项目中引入XMSelect库。最后，我们需要添加汉字数据源到下拉选择框中。标签，用于显示下拉选择框。三、配置XMSelect。
nz-select 选择器
陈广晗
05-26 8248
前几太难用到了 nz-select选择器就在这简单的说一下把，最基本的代码 html： <div> <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose"> <nz-optio...
ng-select多选时输入中文时光标靠左
weixin_39436129的博客
07-09 576
项目场景： 组件：下拉框可多选、搜索、清空 版本：“ng-zorro-antd”: “~9.3.0” 问题描述： 仅当nzMode 为 multiple 或 tags 时，才存在以下问题 1、当鼠标聚焦到下拉框时，无光标显示 2、在输入中文进行下拉搜索时，光标是处于文字左边而不是右边，英文及数字均无此状况 <nz-select formControlName="data" nzMode="multiple" (ngModelChange)="onSearch()" nzAllowClear n
nz-select多选
最新发布
01-23
### 关于 `nz-select` 组件多选功能的使用方法 #### HTML 部分 为了实现一个多选的 `nz-select` 下拉菜单，HTML 结构应如下所示： ```html <nz-select [(ngModel)]="listOfSelectedValueName" nzPlaceHolder="请...
zorro of angular ----表格多选
web
03-09 548
这个就是官网上（9.3.0版本）的这个效果： 官网代码 import { Component, OnInit } from '@angular/core'; interface ItemData { id: number; name: string; age: number; address: string; } @Component({ selector: 'nz-demo-table-row-selection-custom', template: ` <nz
ant desigh of angular：让nz-tree-select与nz-tree的值保持一致
web
01-04 1413
需求: 如图： 说明：1、nz-tree-select与nz-tree用的是同一个树数据。2、zorro的10版本 html代码 <nz-tree-select style="width: 100%" [(ngModel)]="selectNodesValue" [nzNodes]="nodes" (ngModelChange)="onChange($event)" nzShowSearch nzPlaceHolder="选择测站" [nzAllowClear]=fals
ng-zorro的树选择nz-tree-select设置虚拟滚动的总高度和搜索隐藏未匹配的节点后显示有问题
zhaolifang_28的博客
02-15 1181
在使用树选择nz-tree-select组件时设置了可以搜索的功能，并且添加了nzHideUnMatched="true"参数，在添加参数nzDropdownStyle="300px"后发现搜索后的数据显示有问题，搜索的数据没有直接显示在下面，如图所示查找发现是nzDropdownStyle="300px"设置固定高度会导致搜索出的数据在原先位置，需要滑动才能查看到，解决方法修改成[nzDropdownStyle]="{ 'max-height': '300px' }"，修改后代码如下。
实现select各种搜索功能
08-30
select标签实现各种搜索功能
Angular多选、全选、批量选择操作实例代码
08-31
列表批量选择是一个开发人员经常遇到的功能，列表批量选择的实现方式很多，这篇文章主要介绍了Angular多选、全选、批量选择实例代码，有兴趣的可以了解一下。
nz-select踩坑笔记之光标失效
qq_45832807的博客
12-07 902
实现效果： 解决方法： ::ng-deep { .ant-select-show-search.ant-select-multiple .ant-select-selector input { padding: 0; } }
Angular 全屏后选择器 (nz-select) 下拉选项框失效【开发笔记】
yuyu的博客
04-13 1002
Angular 全屏后选择器 (nz-select) 下拉选择无法使用。
react+antd Select下拉框位置随页面偏移
PYLH7的博客
03-18 3120
<Select style={{width: 200}} getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}> </Select> 根据官方Api，若位置发生偏移，添加getPopupContainer属性，使其依附于其父节点，默认是body
记录一个关于nz-select的奇怪问题
weixin_72233826的博客
01-24 506
最先出现的问题是下拉选择带有背景色且无法选中。后将dbname初始值改为‘‘ ，第一次可选，且下拉正常。选择后打印值为undefined后出现与最先出现的问题一样。
Angular中nz-select实现两个选择框互相关联
m0_51935008的博客
01-25 2863
两个选择框 一个是版本名称 一个是版本号 每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.
nz-select 数据回显失败，大模型救了我一命。
二蛋的博客
09-30 882
nz-select没有回填数据。
给nz-select的nz-option设置样式
smallNut的博客
12-04 3223
今天刚好接到一个需求要求鼠标移到nz-option上时显示option的名字的全称，原因是option的label太长导致无法显示完全 (这里遇到相同问题的话也可以考虑将ng-zorro-antd组件版本升到10，版本10会自带title属性，但是版本升级可能会产生未知的问题所以我没考虑) 这里的话还是需要用到option的自带api nzCustomContent 我的实际代码如下，定义一个自定义模板，将想要进行写的样式放在自定义模板中，这样的话除了添加title属性以外还可以做更多的拓展，即使数据
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

@Dai

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

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

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

打赏作者

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

抵扣说明：

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

余额充值