javascript - 输入键验证 contenteditable

Question

由于 contenteditable，我有一个用户可以修改的标题。 我希望当用户按下 enter 时验证标题而不是传递一行。

<div class="panel-participants-title"
     *ngIf="thread.title !== '' ">
    <div class="panel-title"
         contenteditable="true">
           {{thread.title.substring(1)}}
    </div>
</div>


.panel-participants-title:hover > *[contenteditable="true"] {
  background: #989898;
}
.panel-participants-title > *[contenteditable="true"] {
  outline: 0;
}

/////更新

<div class="panel-participants-title">
     <div class="panel-title"
          contenteditable="true"
          (keypress)= "validateTitle($event)">
              {{thread.title.substring(1)}}
     </div>
</div>

validateTitle(event: any): void {
  if(event.keyCode===13) {
    document.getElementById("panel-title").submit();
  }
}

////////更新2

validateTitle(event: any): void {
  if(event.keyCode===13) {
    event.preventDefault();
    event.stopPropagation();
    event.submit();
  }
}

Answer 1

这是 fiddle 的一个工作示例，以防它关闭:)

document.querySelector('#id1').addEventListener('keypress', function (e) {
    var key = e.which || e.keyCode;
    if (key === 13) { // 13 is enter
      	var text = document.getElementById("id1").value;
        if (text.includes("w")) {
        	alert("Omg, the string contains a W, try again");
        } else {
     		document.getElementById("id1").blur();
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input Field <input id="id1" type="text" name="fname">