Повесить сеттер на input.value

[FINoM]

Подскажите, как вызвать некую функцию не только при вызове события (keydown, select, change...), но и при обычном присваивании элементу формы некоегого значения:

input.value = 'blah'; // ← должна вызываться определенная функция

(на старые браузеры можно забить)

Обычный Object.defineProperty здесь, наверно, не прокатит, так как убивает стандартный геттер и сеттер.

Тот же вопрос интересен и касательно innerHTML.

[devote]

<input id="lala" type="text" />
<script>
    var inp = document.getElementById( 'lala' );
    var descriptor = Object.getOwnPropertyDescriptor( inp, 'value' );
    var oldSetter = descriptor.set;
    descriptor.set = function( value ) {
        alert( "Попытка назначить: " + value );
        oldSetter.apply( this, arguments );
    }
    Object.defineProperty( inp, "value", descriptor );

    inp.value = "test";;
</script>

[FINoM]

devote,

Uncaught TypeError: Invalid property.  A property cannot both have accessors and be writable or have a value, #<Object>

Object.getOwnPropertyDescriptor ( ROOT.name.field, 'value' )
 → 
configurable: true
enumerable: true
value: "Jubilee"
writable: true

Тут нет сеттера, как видно.

[devote]

Я так понимаю это хром тупит с первым вариантом.

<input id="lala" type="text" />
<script>
    var inp = document.getElementById( 'lala' );

    Object.defineProperty( inp, "value", {
        configurable: true,
        enumerable: true,
        set: function( value ) {
            alert( "Попытка назначить: " + value );
            this.setAttribute( "value", value );
        },
        get: function() {
            return this.getAttribute( "value" );
        }
    });
 
    inp.value = "test";

    alert( inp.value );
</script>

[FINoM]

devote, хм, как-то не догадался использовать атрибут. Спасибо.

[FINoM]

Я так понимаю это хром тупит с первым вариантом.

Он не тупит, просто дескриптор не содержит акцессоров.

[devote]

Он не тупит, просто дескриптор не содержит акцессоров.

это я понял, а опера содержит.

[FINoM]

С innerHTML вопрос еще открыт. Здесь никак не заюзаешь атрибут.
Хотя, в принципе, можно погеморроиться: при срабатывании сеттера превращать полученную строку в DOM элементы, затем аппендить в искомый элемент, предварительно удалив каждый тег внутри.
При геттере преобразовывать элементы внутри в строку.
Но это уж слишком геморройно.

[FINoM]

Вот она, рыба:

<div>Blah</div>
<span></span>
<script>
var div = document.querySelector( 'div' ),
  span = document.querySelector( 'span' );

div.addEventListener( 'DOMSubtreeModified', function() {
  span.innerHTML = 'fuck yea';
});

div.innerHTML = 'New HTML';
</script>

[devote]

Но это уж слишком геморройно.

ну почему геморойно, не так и геморно:

<div id="lala"></div>
<script>
    var div = document.getElementById( 'lala' );
 
    (function( div ) {
        var currentInnerHTML = div.innerHTML;
        Object.defineProperty( div, "innerHTML", {
            configurable: true,
            enumerable: true,
            set: function( value ) {
                alert( "Попытка назначить: " + value );
                var div = document.createElement("DIV");
                div.innerHTML = value;
                currentInnerHTML = div.innerHTML;
                // очищаем от всего что есть сейчас
                while( this.firstChild ) {
                    this.removeChild( this.firstChild );
                }
                // добавляем новое
                while( div.firstChild ) {
                    this.appendChild( div.firstChild );
                }
            },
            get: function() {
                return currentInnerHTML;
            }
        });
    })( div );
  
    div.innerHTML = "<b>test</b> <i>italic</i>";
 
    alert( div.innerHTML );
</script>