通过api调用自动调整文本区域的值（纯javascript）

我试图在textarea上添加自动调整大小功能。下面的代码只有在输入内容时才能正常工作。但是，如果我只是更新来自api的值，它不会触发任何事件。因此，它不能调整大小。是否有反正我可以触发keyup或其他事件来触发函数获取scrollHeight programatically ??通过api调用自动调整文本区域的值（纯javascript）

autoResizeTextArea = (e) => { 
    const element = e.target 
    element.style.height = 'auto' 
    element.style.overflowY = 'hidden' 
    element.style.height = element.scrollHeight + 'px' 
}

来源

2017-07-18 user3882878

以前回答问题https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript – zfrisch

我得到未处理拒绝InvalidStateError ：未能在'EventTarget'上执行'dispatchEvent'：提供的事件未初始化。我必须添加addEventListener事件吗？我正在添加事件与反应（onKeyUp） – user3882878

如果你控制，改变的代码，你可以简单地通过调用element.onchange()

UPDATE

manualy触发事件，不要忘记事件listenner onchange附加到元素的JavaScript库

请注意，它应该通过js element.onchange insted通过html指令进行设置。

这里是一个工作示例jsfiddle

HTML：

<textarea id="mytext"></textarea> 
<button id="mybtn">change input</button>

JS：

var onChange = function(){ 
    alert('input changed'); 
} 

var changeInput = function(){ 
    text.value = 'Hello World'; 
    text.onchange(); 
} 

button = document.getElementById('mybtn'); 
button.onclick = changeInput; 

text = document.getElementById('mytext'); 
text.onchange = onChange;

来源

2017-07-18 17:32:13

它说它是undefined – user3882878

@ user3882878查看示例请https://jsfiddle.net/46btt4uc/ –

https://jsfiddle.net/ab9hkbL7/1/

let textarea = document.querySelector("#myTextArea"); 
let tael = textarea.addEventListener.bind(textarea); 

let autoResizeTextArea = (e) => { 
    const element = e.target 
    element.style.height = 'auto' 
    element.style.overflowY = 'hidden' 
    element.style.height = element.scrollHeight + 'px' 
} 

tael('update', autoResizeTextArea); 
tael('keyup', autoResizeTextArea); 
//add event listeners for update and keyup 

//for demonstration set value big enough that it will resize box: 
textarea.value = `lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`; 

//setup promise to resolve after 2 seconds. 
//This will simulate fetching external data. 

let newPromise = new Promise((res, rej) => { 
    setTimeout(() => { 
    res('resolved'); 
    }, 2000) 
}).then((success) => { 

//create the update event and dispatch it 
    let myEvent = new CustomEvent("update"); 
    textarea.dispatchEvent(myEvent); 
});

的更多信息，请看一看MDN：dispatchEvent CustomEvent

来源

2017-07-18 19:20:56 zfrisch

通过api调用自动调整文本区域的值（纯javascript）

回答

相关问题