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’
} else {
// 非空行则回车加内容
innerHTML += (‘
’ + text)
}
})
// 将回车替换成换行符
span.innerHTML = innerHTML
// 添加到页面上才能得到尺寸
document.body.appendChild(span)
// 获取 span 的宽高,+ 5 在刚好的宽度上多 5px 保证光标的显示,要不然宽度不够会自动到下一行
var width = span.clientWidth + 5
var height = span.clientHeight
// 最后一行是否为空行
var isEmptyLine = !texts[texts.length - 1].length
// 就只剩一行并且是空行,则需要使用默认匡高
if (texts.length === 1 && isEmptyLine) {
if (colw) { width = colw }
if (rowh) { height = rowh }
}
// 设置宽高
input.style.width = ${width}px
input.style.height = ${height}px
// 移除计算的 span
document.body.removeChild(span)
}
// 支持全部替换(部分浏览器不自带)
String.prototype.replaceAll = function (s1, s2) {
return this.replace(new RegExp(s1, “gm”), s2)
}
总结
-
框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
-
算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!