[英]How to detect textarea size change with pure javascript?
我想在textarea的大小發生變化時發出通知,當時發生了什么事,我該如何檢測呢?
這是一個使用純(沒有jQuery等依賴)Javascript的小例子。
它使用mouseup和keyup處理程序以及可選的intervall來檢測更改。
var detectResize = (function() {
function detectResize(id, intervall, callback) {
this.id = id;
this.el = document.getElementById(this.id);
this.callback = callback || function(){};
if (this.el) {
var self = this;
this.width = this.el.clientWidth;
this.height = this.el.clientHeight;
this.el.addEventListener('mouseup', function() {
self.detectResize();
});
this.el.addEventListener('keyup', function() {
self.detectResize();
});
if(intervall) setInterval(function() {
self.detectResize();
}, intervall);
}
return null;
}
detectResize.prototype.detectResize = function() {
if (this.width != this.el.clientWidth || this.height != this.el.clientHeight) {
this.callback(this);
this.width = this.el.clientWidth;
this.height = this.el.clientHeight;
}
};
return detectResize;
})();
用法: new detectResize(element-id, intervall in ms or 0, callback function)
例:
<textarea id="mytextarea"></textarea>
<script type="text/javascript">
var mytextarea = new detectResize('mytextarea', 500, function() {
alert('changed');
});
</script>
在jsfiddle.net/pyaNS上查看它的實際操作。
你可以使用庫不可知的JavaScript(假設你沒有使用jQuery或正在使用另一個庫):
<textarea id="t"></textarea>
<script>
var t = document.getElementById('t'),
tHeight = t.clientHeight,
tWidth = t.clientWidth;
console.log(t);
t.onmouseup = function (e) {
if (tHeight !== t.clientHeight || tWidth !== t.clientWidth ) {
console.log('size change');
tHeight = t.clientHeight;
tWidth = t.clientWidth;
}
};
</script>
我已經包含了元素的控制台日志,因此您可以在檢查器中查看可以使用的事件。
當他嘗試更改textarea的大小時,您可以攔截用戶的鼠標事件。
1: Element .addEventListener("mousedown", event => {})
:開始攔截。
2: window .addEventListener("mousemove", event => {})
:這里比較了每個移動事件的先前和當前大小。
window .addEventListener("mouseup", event => {})
:停止攔截。 試試這個演示。
jQuery(document).ready(function(){
var $textareas = jQuery('textarea');
// set init (default) state
$textareas.data('x', $textareas.outerWidth());
$textareas.data('y', $textareas.outerHeight());
$textareas.mouseup(function(){
var $this = jQuery(this);
if ( $this.outerWidth() != $this.data('x')
|| $this.outerHeight() != $this.data('y') )
{
alert( $this.outerWidth() + ' - ' + $this.data('x') + '\n'
+ $this.outerHeight() + ' - ' + $this.data('y')
);
}
// set new height/width
$this.data('x', $this.outerWidth());
$this.data('y', $this.outerHeight());
});
});
無法在純JavaScript中使用我們必須使用jQuery
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.