Question

例如，在输入标记中我们有一个名为type的字段，如果我们输入type =＆＃34; numeric＆＃34;它不允许输入除数字之外的任何内容。

如果我使用td contenteditable，我怎么能阻止用户输入该td标签中的数字以外的任何内容。

Answer 1

试试这个

$('#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>

Answer 2

您可以在jQuery中使用.keydown()方法。更清洁，简洁。请参阅下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您已在此处添加了角度标记。

这可能是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

如何验证contenteditable = true的html标记？

3 个答案: