如何验证具有 contenteditable=true 的 html 标签？

Question

例如，在输入标签中，我们有一个名为 type 的字段，如果我们将 type ="numeric" 放在其中，则它不允许输入除数字以外的任何内容。

如果我使 td 内容可编辑，我怎么能阻止用户在该 td 标记中输入除数字之外的任何内容。

Answer 1

您可以尝试在 jQuery 中使用 .keydown() 方法。更干净简洁。见下面的sn-p

$("td").on( "keydown",function(event) {
       if( isNaN(String.fromCharCode(event.which))){
           event.preventDefault(); 
       }
})

td {
	padding:3px;
	border:1px solid red;
	font-size:18px;
	line-height:24px;
	width:100px;
	height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
	<td contenteditable="true"></td>
</tr>
</table>

另外，如果您想允许 backspace 和 del 键（可能有用），请将代码更改为

$("td").on( "keydown",function(event) {
       if(event.which != 8 && event.which !=46 && isNaN(String.fromCharCode(event.which))){
           event.preventDefault(); 
       }
})

td {
	padding:3px;
	border:1px solid red;
	font-size:18px;
	line-height:24px;
	width:100px;
	height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
	<td contenteditable="true"></td>
</tr>
</table>

Answer 2

您已在此处包含 angular 标签。

angular directive 可能是这样的：

src/onlyNumeric.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({ selector: '[onlyNumeric]' })
export class OnlyNumericDirective {

    @HostListener('input') onContentChange() {
      this.el.nativeElement.innerText = this.el.nativeElement.innerText.replace(/\D/g,'')
    }

    constructor(private el: ElementRef) {
    }
}

Plunker example here

Answer 3

试试这个

$('#text').keypress(function(e) {
  if (!(e.which >= 48 && e.which <= 57)) {
    return false;
  }
});

$('#text').keypress(function(e) {
  if (!(e.which >= 48 && e.which <= 57)) {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Name
      <td>
        <p contenteditable="true" id="text">000</p>
      </td>
  </tr>

</table>