Вызов функции события для <datalist>и расширение тега <input>- HTML 5 - PullRequest
Новая
       15

Вызов функции события для <datalist>и расширение тега <input>- HTML 5

0 голосов
/ 05 июня 2018

Я пытаюсь использовать CSS, чтобы расширить поле ввода при наведении / фокусе поисковой иконки CSS

Теперь я пытаюсь вызвать функцию из html в угловой компонент (кажется, что я не могу использоватьCSS с элементом datalist), так что тег ввода остается развернутым, когда я перемещаю фокус или выбираю элемент из списка данных

Вот мой пример HTML 

  <div class="searchDiv">

      <span class="glyphicon glyphicon-search" id="searchSpan"  (click)="searchEvent($event)"></span>
      <form [formGroup]="searchGroup" (ngSubmit)="searchEvent($event)">
       <input type="text" placeholder="search" id="searchInput"  formControlName="localInput" class="" list="promotionsSearchList"
       (keyup)="searchEvent($event)" />
       </form>
       <datalist id="promotionsSearchList" class="test" 
        onfocus="focusEvent()" onmousemove="focusEvent()">

       </datalist>

 </div>

Вот мой CSS 

.customClass {
  float: center;

 }

.grid {
  display: inline-grid;
   grid-template-columns: 150px 150px 150px 150px auto;
   grid-template-rows: repeat(3,25px);
   width: 100%;

  }

   #headerDiv {
     grid-row : 1;
      grid-column : 1/6;
     padding-top: 14px;

     }

     #firstElementSpan {
       grid-row:1;
       grid-column:2/6;

      }

     #secondElementSpan {
        grid-row:1;
        grid-column:3/6;
      }

      #thirdElementSpan {
        grid-row:1;
        grid-column:4/6;
      }

      #fourthElementSpan {
        grid-row:1;
        grid-column:5/6;
       }

       .rounded-text-box{
         border-radius: 2px;
        border: 2px solid #555;
        padding: 20px;
         width: 200px;
         height: 15px;
       }


   .searchDiv{
      width: 500px;
      vertical-align: middle;
      white-space: nowrap;
      position: relative;
    }

   .searchDiv input#searchInput{

     width: 45px;
      height: 30px;
      background: white;
     border: none;
     font-size: 10pt;
     float: left;
     color: black;

     /*this is to accomadate the search icon  */
      padding-left: 45px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      border-radius: 5px;
    }

     .searchDiv #searchSpan{

      /*the position needs to be mentioned as absolute for the icon to 
      appear on top of the input  */
       position: absolute;
       top: 5%;
        margin-left: 17px;
       margin-top: 7px;
        /*for now z index is mentioned as to make the icon on top   */
       /* z-index: 5; */
        z-index : 1;
       color: #4f5b66;
       background-color: inherit;
      }


      .searchDiv input#searchInput:hover, .searchDiv 
      input#searchInput:focus, .searchDiv input#searchInput:active{
        outline:none;
        width:300px;
      } 

      .searchDiv:hover input#searchInput{
        width:300px;
      }

      .searchDiv:hover #searchSpan{
       color: #93a2ad;
      }

      /* this is not working , hence tried to use get the element in 
        angular and change its DOM prop*/
     datalist:active, datalist:focus input#searchInput{
      width:300px;
     }

Это мой пример вызова угловой компоненты.Я только что перешел к точке вызова функции в этой точке 

  focusEvent(){
    console.log('onfocusEvent');
    const inputElement = document.getElementById('searchInput');



     inputElement.style.width = '300px';

   }

Я не вижу функции вызова.Я также попытался использовать привязку свойств angular, но безуспешно.в основном я хочу, чтобы элемент ввода продолжал расширяться, когда я перенес фокус на элемент списка данных и перебираю список.Не могли бы вы, ребята, помочь?

1 Ответ

0 голосов
/ 07 июня 2018

Спасибо @CBroe за уведомление об этом.Мы не можем слушать какие-либо события, а также не вносить никаких изменений, используя datalist.Поэтому я начал использовать ul

Вот пример измененного HTML-кода: 

<div class="searchDiv">

      <span class="glyphicon glyphicon-search" id="searchSpan"  (click)="searchEvent($event)"></span>

       <input type="text" placeholder="search" id="searchInput"   class="" list="promotionsSearchList"
       (keyup)="searchEvent($event)" [(ngModel)]="searchModel"/>

       <ul  *ngIf="loadDropDown">
         <li  *ngFor="let pp of promoList" (click)="selectAnyItem($event)" value="pp.id"><span>{{pp.name}}</span>
         </li>
       </ul>

</div>

Вот CSS-код, который я реализовал. 

 ul {
    padding: 2px;
    list-style-type: none;
     z-index:2;
    background-color:black;
    /*below css makes the element clear the float and move to the next 
    line if placed in the same block  */
    clear:both;

   }

 li:hover{
       background-color: dodgerblue;
 }

 .rounded-text-box{
      border-radius: 2px;
      border: 2px solid #555;
      padding: 20px;
      width: 200px;
      height: 15px;
  }


  .searchDiv{
       width: 500px;
       vertical-align: middle;
        white-space: nowrap;
       position: relative;
    }

    .searchDiv input#searchInput{

           width: 45px;
           height: 30px;
           background: white;
           border: none;
           font-size: 10pt;
           float: left;
           color: black;
           /*this is to accomadate the search icon  */
           padding-left: 45px;
           -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
           border-radius: 5px;

           }

         .searchDiv #searchSpan{
             position: absolute;
             top: 5%;
              margin-left: 17px;
             margin-top: 7px;

             z-index : 1;
             color: #4f5b66;
             background-color: inherit;
           }


          .searchDiv input#searchInput:hover, .searchDiv 
         input#searchInput:focus, .searchDiv input#searchInput:active{
          outline:none;
           width:300px;
          } 

          .searchDiv:hover input#searchInput {
              width:300px;

              box-sizing:border-box;
            }

           .searchDiv:hover ul{
               width:300px;
               box-sizing: border-box;
            }

            .searchDiv:hover #searchSpan{
               color: #93a2ad;
            }

Надеюсь, это поможетпользователи, которые пытаются реализовать

...