Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Повесить сеттер на input.value (https://javascript.ru/forum/misc/30240-povesit-setter-na-input-value.html)

devote 28.07.2012 21:24

Работает везде
<!DOCTYPE html>
<html>
<body>
<div id="test"></div>
<div id="test2"></div>
<script>
function setInnerHTMLHandler( elem, setfn, getfn ) {
    var descriptor = Object.getOwnPropertyDescriptor( elem, "innerHTML" ),
        temp = document.createElement( 'div' ),
        currentHTML = elem.innerHTML;

    Object.defineProperty( elem, "innerHTML", {
        configurable: true,
        set: descriptor.set ? function( value ) {
            var result;
            if ( !setfn || ( result = setfn( value ) ) !== false ) {
                descriptor.set.call( this, result || value );
            }
        } : function( value ) {
            var result;
            if ( !setfn || ( result = setfn( value ) ) !== false ) {
                temp.innerHTML = result || value;
                currentHTML = temp.innerHTML;
                while( this.firstChild ) {
                    this.removeChild( this.firstChild );
                }
                while( temp.firstChild ) {
                    this.appendChild( temp.firstChild );
                }
            }
        },
        get: descriptor.get ? function() {
            var result;
            if ( !getfn || ( result = getfn() ) !== false ) {
                return result || descriptor.get.call( this );
            }
        } : function() {
            var result;
            if ( !getfn || ( result = getfn() ) !== false ) {
                return result || currentHTML;
            }
        }
    });
}


// тесты

var div = document.getElementById('test');

setInnerHTMLHandler( div, function( value ) {
    alert( "Попытка установить значение: " + value );
}, function() {
    alert( "Попытка получить значение" );
})

div.innerHTML = "Hello World!!!";
alert( div.innerHTML );


var div2 = document.getElementById('test2');
setInnerHTMLHandler( div2, function( value ) {
    alert( "Попытка установить значение: " + value );
    return "А вот и значение: " + value;
}, function() {
    alert( "Попытка получить значение" );
    return "Текущее не дам";
})

div2.innerHTML = "Hello World!!!";
alert( div2.innerHTML );


</script>
</body>
</html>

oneguy 28.07.2012 22:00

Цитата:

Сообщение от devote
Работает везде

В Фаерфоксе не работает: TypeError: descriptor is undefined, 14 строка.
Да и там, где работает, работает неправильно: innerHTML - это не единственный способ изменить содержимое элемента. Например appendChild не изменяет локальную переменную currentHTML.

oneguy 28.07.2012 22:02

У меня вопрос: нужно отследить только записи innerHTML или любые изменения внутри элемента?


Часовой пояс GMT +3, время: 12:35.