亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

HTML textarea 調整大小事件

HTML textarea 調整大小事件

慕容708150 2022-01-07 19:15:38
我正在尋找一種在調整 textarea 大小時運行一些 JS 的方法。經過一個小時的搜索和擺弄,我有了一些有點用的東西,但還不夠好。titleTextArea.mouseup(function() {    popup.update(); titleTextArea.focus();});上面代碼的問題是在textarea中點擊的時候也會運行。我正在運行的代碼會導致 textarea 重新渲染,當有人在其中工作時不應該發生這種情況,因為它會混淆焦點。我已經嘗試按照這個SO post使用 jQuery resizable 。由于某種原因,調整大小事件不會觸發。實際上,我寧愿不需要為此引入 jQuery UI。有沒有辦法在文本框調整大小上運行代碼(僅在調整大小完成后才可以)不會被一堆不同的動作觸發?(PS:為什么沒有香草事件呢??。?
查看完整描述

2 回答

?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

一個簡單的解決方案可能只是添加對寬度/高度的檢查,但不是一個完美的解決方案:


var ta = document.getElementById("text-area");

var width = ta.clientWidth, height = ta.clientHeight

document.getElementById("text-area").addEventListener("mouseup", function(){

  if(ta.clientWidth != width || ta.clientHeight != height){

    //do Something

    console.log('resized');

  }

  width = ta.clientWidth;

  height = ta.clientHeight;

});

<textarea id="text-area" rows="4" cols="50"></textarea>


查看完整回答
反對 回復 2022-01-07
?
慕田峪4524236

TA貢獻1875條經驗 獲得超5個贊

請試試這個。


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css"

        type="text/css" media="all">

</head>

<body>

<textarea></textarea>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">

    $("textarea").resizable({

        resize: function() {

            alert("xxx");

        }

    });

</script>

</body>

</html>


查看完整回答
反對 回復 2022-01-07
  • 2 回答
  • 0 關注
  • 411 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號