Question

我想实现一个HTML5输入字段，以支持用户的输入。

假设用户不仅要输入随机文本，还必须遵循特定的语法：

rule: <expression> {<op><expression>}
expression: <Object>[<property>] is <State>
property: key=value
State: active | inactive | valid .....

我想到了一个状态机，例如，如果用户输入了该状态机，则该用户处于状态2，否则，他处于状态3，依此类推。

我发现了以下内容：

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

这几乎是我所需要的。但是如您所见，它有点静态。我想更新这些选项，它们应该随时显示，而不仅仅是第一次选择。

因此，如果用户启动一个新表达式，则选项会更改，然后在他们进行一些输入后它们会再次更改。这些选项应该是可单击的，并且这些选项的值应该添加到前面的文本中。

我想到了一个解决方案，我只需要在输入字段下方添加一个标签来更改innerHtml，但这似乎不是一个好的解决方案，什么是更好的主意？

Answer 1

使用以下代码自行解决：

component.ts：

export class Component {
  ruleInputFocused:boolean = false;
  selectActive: boolean=false;
  options: string[]; 

  constructor() {
    this.setState(0);
  }

  ngOnInit() {
  }

  changeSelective(value:boolean){
    this.selectActive= value;
  }

  changeFocused(value:boolean){
    if(this.selectActive == false){
      this.ruleInputFocused = value;
    }
  }


  setState(stateNumber: number){
    this.options = [];
    this.positionCounter = -1;

    if(stateNumber == 0){
      this.options.push("(");
      this.options.push("Object[key=value] ");
    }
  }

  optionClicked(i){
    this.ruleText = this.ruleText.concat(this.options[i]);
    document.getElementById("ruleInput").focus();
  }




  positionCounter = -1; 

  @HostListener('document:keydown', ['$event'])
  public handleKeyboardEvent(event: KeyboardEvent): void {
    if(this.ruleInputFocused){
        if(event.key == 'ArrowDown'){
          this.positionCounter++;
          if(this.positionCounter>this.options.length -1){
            this.positionCounter = 0;
          }
          console.log(this.positionCounter);
        }else if(event.key == 'ArrowUp'){
          this.positionCounter--;
          if(this.positionCounter<0){
            this.positionCounter = this.options.length -1
          }
        }else if(event.key == 'Enter'){
          if(this.positionCounter != -1){
            this.optionClicked(this.positionCounter);
          }
        }
    }
  }

}

HTML：

<div class="mainContainer">


  <div class="ruleInputDiv">
        <div class="divLabel">Rule: </div>
        <input id="ruleInput" type="text"  autocorrect="off" 
          (focus)="changeFocused(true)" (focusout)="changeFocused(false)" [(ngModel)]="ruleText" >
        <button id="ruleInputCheckButton" (click)="checkRule()">Check</button>

  </div>
  <!--[hidden]=!ruleInputFocused-->
  <div class="optionsDiv" id="optionsDiv" [hidden]="!ruleInputFocused">
      <div class="singleOption" *ngFor="let option of options; let i = index" 
        [ngClass]="{selected: positionCounter===i}" (click)="optionClicked(i)" (mouseenter) ="changeSelective(true)" (mouseleave) ="changeSelective(false)">
          {{option}}
          <div class="verticalBorderDiv"></div>
      </div>
  </div>


</div>

CSS：

Angular6 HTML输入字段具有更改的下拉菜单选项

1 个答案: