第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

將 div 標(biāo)簽包含到輸入的焦點(diǎn)中

將 div 標(biāo)簽包含到輸入的焦點(diǎn)中

動(dòng)漫人物 2023-11-13 14:47:55
所以我有一個(gè)輸入,下面有一個(gè)下拉菜單。因此,當(dāng)我單擊輸入時(shí),下拉菜單將打開。但我無(wú)法從下拉列表中選擇任何內(nèi)容,因?yàn)樗鼪](méi)有聚焦。因此,當(dāng)我單擊一個(gè)值時(shí),它不會(huì)被選中,并且下拉列表會(huì)再次關(guān)閉,因?yàn)樗チ私裹c(diǎn)。所以我現(xiàn)在想知道如何將 div 包含到輸入的焦點(diǎn)中。HTML 輸入:<input  type="text" class="form-control myInput" [(ngModel)]="textToSort"(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}" (focus)="focusFunction()" (focusout)="unFocusFunction()"/>HTML div(下拉菜單):<div class="data-container" *ngIf="showDropDown" style="position: absolute;" >  <p   *ngFor="let data of dataList; let i = index"   class="data-list"                                   (click)="updateTextBox(i,data[columnName]); focusOnInput();"   [ngClass]="{highlight:checkHighlight(i)}"  > {{data[columnName]}}</p></div>成分:focusFunction(){    this.showDropDown = true;  }unFocusFunction() {    this.showDropDown = false;  }
查看完整描述

3 回答

?
千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

blurinput由于mousedown列表項(xiàng),您發(fā)生了事件

所以為了防止這種情況你需要添加

(mousedown)="$event.preventDefault()"

您的列表項(xiàng)的處理程序。我創(chuàng)建了簡(jiǎn)單的演示:

https://stackblitz.com/edit/angular-x3cdr1


查看完整回答
反對(duì) 回復(fù) 2023-11-13
?
Smart貓小萌

TA貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個(gè)贊

最簡(jiǎn)單的方法如下:


focusFunction(){

   this.showDropDown = true;

}


unFocusFunction() {

  setTimeout(() => { this.showDropDown = false; }, 500);

}

我認(rèn)為檢查這個(gè) stackblitz 也會(huì)有幫助: https://stackblitz.com/edit/angular-search-filter ?file=app%2Fapp.component.ts


查看完整回答
反對(duì) 回復(fù) 2023-11-13
?
阿晨1998

TA貢獻(xiàn)2037條經(jīng)驗(yàn) 獲得超6個(gè)贊

您是否在 CSS 中嘗試將下拉類展開時(shí)的 z-index 設(shè)置為 1?

請(qǐng)分享 plunkr 或 stackblitz 鏈接來(lái)查看該場(chǎng)景。


查看完整回答
反對(duì) 回復(fù) 2023-11-13
  • 3 回答
  • 0 關(guān)注
  • 205 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)