javascript - Enter键验证内容是否可编辑

我有一个标题，用户可以通过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();
  }
}

//////// UPDATE2

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

最佳答案

这是小提琴的工作示例，以防它关闭:)

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">

关于javascript - Enter键验证内容是否可编辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49030316/