2024年最全textarea 动态宽高（根据内容动态撑开宽高）(1)，2024年最新京东面试题2024

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// inputEl.style.fontFamily = ‘monospace’

// inputEl.style.wordBreak = ‘break-all’

// inputEl.style.whiteSpace = ‘normal’

// document.body.appendChild(inputEl)

// // 有默认内容初始化尺寸

// inputSizeChange(inputEl)

// 文本输入框（案例）

var inputEl = document.createElement(‘textarea’)

inputEl.rows = 1

inputEl.style.width = ‘20px’

inputEl.style.fontSize = ‘20px’

inputEl.style.fontWeight = 400

inputEl.style.fontFamily = ‘monospace’

inputEl.style.padding = 0

inputEl.style.border = ‘none’

inputEl.style.backgroundColor = ‘red’

inputEl.style.outline = ‘none’

inputEl.style.resize = ‘none’

inputEl.style.wordBreak = ‘break-all’

inputEl.style.whiteSpace = ‘normal’

document.body.appendChild(inputEl)

// 输入监听

inputEl.oninput = (e) => {

// 动态调整宽高

inputSizeChange(inputEl, 23)

}

// 获取焦点

setTimeout(() => {

// 获取焦点

inputEl.focus()

inputEl.select()

}, 0)

// 计算输入框大小

// input：(必填)输入框

// rowh：(必填)当没有内容时默认高度，如果不传当没有内容时会没高度

// colw：(可选)当没有内容时默认宽度，如果不传宽度会很窄

function inputSizeChange (input, rowh, colw) {

// 输入的内容

const text = input.value.replaceAll(‘\r’,‘’).replaceAll(‘\n\n’,‘\n’)

// 创建一个 span

const span = document.createElement(‘span’)

// 隐藏

span.style.opacity = 0

// 清空间距

span.style.padding = 0

span.style.margin = 0

// 保证能正常撑开

span.style.display = ‘inline-block’

// 字体属性跟输入框保持一致

span.style.wordBreak = input.style.wordBreak

span.style.whiteSpace = input.style.whiteSpace

span.style.fontSize = input.style.fontSize

span.style.fontWeight = input.style.fontWeight

span.style.fontFamily = input.style.fontFamily

// 将输入内容分割成行数组

var texts = text.split(‘\n’)

// 插入标签元素

var innerHTML = ‘’

// 便利组装

texts.forEach(function (text, index) {

// 根据情况进行组装

if (index === 0) {

// 0 行直接使用

innerHTML += text

} else if (!text.length) {

// 空行则手动加换行符与临时计算内容

innerHTML += ‘
s’

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-pP7aYEY5-1715652986178)]

[外链图片转存中…(img-o7K5nBDR-1715652986179)]