記事内に広告が含まれています。

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

2017年8月12日

タイトルの通り、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>

-TypeScript