TypeScript input 要素の入力値を div 要素に反映する

スポンサーリンク

タイトルの通り、input 要素に入力された値を div 要素にも表示する例です。

入力要素:input (id: titleInput, contentInput)
反映対象:div(id: titleArea, contentArea)

TypeScript では、input 要素を HTMLInputElement にキャストすることで value 属性にアクセスすることができます。下の keyup イベントで引数 args から target(input 要素)にアクセスし、この target を HTMLInputElement にキャストしています。

index.ts

var dataModel: DataModel;

class DataModel{

private _title: string;
get Title(): string {
return this._title;
}

set Title(newTitle: string) {
this._title = newTitle;

//notification to UI element
var elem: HTMLElement = document.getElementById(this._titleSelector);
if (elem !== undefined && elem.tagName == "DIV") {
elem.textContent = this._title;
}
}

private _titleSelector: string;
get TitleSelector(): string {
return this._titleSelector;
}

set TitleSelector(titleSelector: string) {
this._titleSelector = titleSelector;
}

constructor() {
}
}

document.addEventListener("DOMContentLoaded", function () {
dataModel = new DataModel();
});

document.addEventListener("focus", function (args) {
var target: HTMLInputElement = <HTMLInputElement>args.target;
if (target !== undefined && target.id !== "") {
var placement: any = target.getAttribute("data-placement");
dataModel.TitleSelector = target.getAttribute("data-placement");
}
}, true);

document.addEventListener("keyup", function (args) {
var target: HTMLInputElement = <HTMLInputElement>args.target;
if (target !== undefined && target.id !== "") {
dataModel.Title = target.value; // TypeScript では、オブジェクトを HTMLInputElement にキャスト後、value 属性にアクセスすることができる。
}
});

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="index.js"></script>
</head>
<body>
<input type="text" id="titleInput" data-placement="titleArea" />
<div id="titleArea"></div>

<input type="text" id="contentInput" data-placement="contentArea" />
<div id="contentArea"></div>
</body>
</html>

コメント

タイトルとURLをコピーしました