【JavaScript (jQuery)】textareaの内容が変更したことを取得する方法

jsJavaScript
この記事は約2分で読めます。
スポンサードリンク

はじめに

ブラウザ上の画面などでユーザーが入力できるテキストフォームをつくる場合、大きく分けて2つの方法があります。

1つ目が、inputタグでtypeをtextに指定する方法です。
こちらは、主に1行で入力できるようなテキストの入力に用いられます。

<input type="text"> xxx </input>

2つ目が、textareaタグを用いた方法です。
こちらは、長文でのテキスト入力をユーザーに要求するときに用いられます。

<textarea> xxx </textarea>

これらのフォームにおいて、ユーザーがテキストを入力しフォームに入力された内容が変更されたことを取得したい場合があります。

1つ目のinputタグの場合は、jQueryでは、onChangeイベントをリッスンすれば、簡単に取得できます。一方、textareaタグの場合は、一手間必要で、propertychangeをbilndしてあがる必要があります。

コード

inputタグでのフォーム内容変更取得

$('#inputID').on('change', function() {

    // describe your code here

});

textareaタグでのフォーム内容変更取得

$('#textareaID').bind('input propertychange', function() {

    $("#yourBtnID").hide();

    if(this.value.length){
        $("#yourBtnID").show();
    }
});

参考

How can I bind to the change event of a textarea in jQuery?
I want to capture if any changes happened to <textarea>. Like typing any characters (deleting,backspace) or mouse click and paste or cut. Is there a jQue...
タイトルとURLをコピーしました