soulhighwing / ChatGPTCustomizer

ChatGPTCustomizer helps you personalize your chat experience by using the power of the ChatGPT API
GNU General Public License v3.0
58 stars 6 forks source link

textarea autosize #1

Closed alexz006 closed 1 year ago

alexz006 commented 1 year ago

Great job! Thank you!

Here is the solution for auto-sizing by height:

content.js

function autosize(el){
  el.style.height = "43px";
  el.style.height = (el.scrollHeight + 5) + "px";
}
var t = document.createElement("textarea");
t.className = "GPTExtensiontextareablur";
t.id = "user";
t.style.height = "44px";
t.addEventListener("focus", function() {
  autosize(this);
});
t.addEventListener("input", function() {
  autosize(this);
});
t.addEventListener("blur", function() {
  this.style.height = "44px";
});

Options.js

function autosize(el){
  el.style.height = "27px";
  el.style.height = (el.scrollHeight + 5) + "px";
}
const userInput = document.createElement('textarea');
userInput.className = 'GPTExtensiontextareablur';
userInput.id = `user${index}`;
userInput.name = `user${index}`;
userInput.value = `${profile.saveuser}`;
userInput.style.height = "28px";
userInput.addEventListener("focus", function() {
  autosize(this);
}); 
userInput.addEventListener("input", function() {
  autosize(this);
});
userInput.addEventListener("blur", function() {
  this.style.height = "28px";
});