將 jQuery 轉換為純 JavaScript

Question

如何將此jQuery code轉換為plain JavaScript ？

$("#txtTestNumbersOnlyRegex").keyup(function () { 
  var newValue = $(this).val().replace(/[^0-9]/g,'');
  $(this).val(newValue);    
});  

Answer 1

簡單如下

document.querySelector('#txtTestNumbersOnlyRegex').onkeyup = function() {
    var newValue = this.value.replace(/[^0-9]/g, '');
    this.value = newValue;
}

更新：使用 Angular

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

// app.component.html
<input type="text" [(ngModel)]="value" (keyup)="replacer(value)">

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  text: string;

  replacer(value: string) {
    this.text = value.replace(/[^0-9]/g, '');
  }
}

這是示例代碼

Answer 2

一種可能的 Jquery->JS 轉換，

 document.getElementById('txtTestNumbersOnlyRegex').addEventListener("keyup", function() { var newValue = this.value.replace(/[^0-9]/g, ''); this.value = newValue; });

 <input type="text" id="txtTestNumbersOnlyRegex" />

對於角度：像這樣抓住你的輸入元素

var elm = document.getElementById('txtTestNumbersOnlyRegex')
   angular.element(elm );

Answer 3

相當簡單的轉換：

使用 DOM addEventListener命令偵聽元素上的事件：

document.querySelector("#txtTestNumbersOnlyRegex").addEventListener('keyup', function(){
    var newValue = this.value.replace(/[^0-9]/g,'');
    this.value = newValue;    
})