動態監控input的值的變化 賦值value觸發

胡田新發表於2020-12-07

/**動態監控input的值的變化 賦值value觸發

 * [changeValueListener 監聽 js 修改 input 和 textarea 的 value。]

 * @param  {[HTMLElement]}   element  [具有 value 屬性的 html 元素,如 input 和 textarea。] 

 * @param  {Function} callback [回撥,this 為 element,引數為當前值。]

 * @return {[HTMLElement]}            [element]

 */

function changeValueListener(id, callback) {

var element = document.getElementById(id);

if (!Array.isArray(element.callbacks)) {

element.callbacks = [];

var valueDes = Object.getOwnPropertyDescriptor(element.constructor.prototype, "value");

Object.defineProperty(element, 'value', {

set: function(v) {

// console.log('set', v, this, arguments);

element.callbacks.forEach(function(callback) {

if(!v)return false;//賦值空不返回 文字清空X 會觸發這個事件

if(v.indexOf('@')>-1) {

    v=v.substr(1,v.length);

return false;

}

callback.call(this, v);

});

valueDes.set.apply(this, arguments);

},

get: function() {

//console.log('get', this, arguments);

return valueDes.get.apply(this, arguments);

}

});

}

element.callbacks.push(callback);

// return element;

}


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31486267/viewspace-2739986/,如需轉載,請註明出處,否則將追究法律責任。

相關文章