目录
一、已知问题及解决方案概述:
1、高度自适应
问题:input无法换行;textarea可以换行但是高度没办法自适应。
解决方案:div标签增加contenteditable 属性实现div可输入内容,高度自适应。
代码示例:
<div class="input" contenteditable="true"></div>
2、ios无法拼音输入
问题:on("input")监听input、textarea输入事件,ios无法拼音输入中文。
解决方案:使用compositionstart、compositionend监听输入事件。
原理:input监听是键盘输入按键按下了就触发事件,compositionstart 和 compositionend,会在选定文字后才触发input 事件。
代码示例:
var inputFlag = true;
$(".input").on("compositionstart", function () {
console.log("拼音输入开始")
inputFlag = false;
})
$(".input").on("compositionend", function () {
console.log("拼音输入结束")
inputFlag = true;
})
3、ios过滤符号输入
问题:在ios系统下,例如使用replace对"@"进行替换,如下图在连续点击这个按钮时,会将前面已输入内容删除掉(正则匹配中英文、数字、指定符号)。
解决方案:使用变量保存上一步已输入内容,在遇到不匹配字符时,将已保存内容替换当前输入内容,达到replace效果。使用div模拟textarea输入时,内容框重新赋值后光标会重置在文字最前,还需调用自定义po_Last_Div方法进行重新定位(使用input、textarea无光标问题)。
代码示例:
var valHistory = ''; //保存输入历史,当输入不符合校验规则时使用历史内容替换
$(".input").on('keyup keydown', function () {
var _this = this;
setTimeout(function () {
if (inputFlag) {
var reg = /[^\w\u4E00-\u9FFF\.\…\:\:\;\\/\;\=\-\,\“\”\。\,\、\?\?\"\!\,\!\!\(\)\(\)\*]/g;//定义正则表达式 (中英文、数字、指定符号)取反匹配
if ($(_this).text().search(reg) != -1) {//search()方法:用户输入的值如果不符合正则表达式,就返回-1,当前场景如果符合表达式,即“中英文、数字、指定符号”以外字符
$(_this).text(valHistory);
po_Last_Div($(_this)[0]); //重新定位光标位置
}
valHistory = $(_this).text();
}
}, 0)
});
//定位div(contenteditable = "true")
function po_Last_Div(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
console.log("safari-getSelection--", obj)
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
console.log("range--", range)
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
} else if (document.selection) {//ie10 9 8 7 6 5
console.log("ie-selection--", obj)
var range = document.selection.createRange();//创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
二、完整代码示例
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title>input</title>
<meta charset="utf-8">
<meta name="viewport"
content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<style>
.input {
width: 500px;
height: auto;
min-height: 20px;
border: 1px solid #ccc;
}
.input[contenteditable]:focus {
outline: none;
}
</style>
<body>
<div class="input" contenteditable="true"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var inputFlag = true;
$(".input").on("compositionstart", function () {
console.log("拼音输入开始")
inputFlag = false;
})
$(".input").on("compositionend", function () {
console.log("拼音输入结束")
inputFlag = true;
})
var valHistory = ''; //保存输入历史,当输入不符合校验规则时使用历史内容替换
$(".input").on('keyup keydown', function () {
var _this = this;
setTimeout(function () {
if (inputFlag) {
var reg = /[^\w\u4E00-\u9FFF\.\…\:\:\;\\/\;\=\-\,\“\”\。\,\、\?\?\"\!\,\!\!\(\)\(\)\*]/g;//定义正则表达式
if ($(_this).text().search(reg) != -1) {//search()方法:用户输入的值如果不符合正则表达式,就返回-1
$(_this).text(valHistory);
po_Last_Div($(_this)[0]);
}
valHistory = $(_this).text();
}
}, 0)
});
//定位div(contenteditable = "true")
function po_Last_Div(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
console.log("safari-getSelection--", obj)
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
console.log("range--", range)
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
} else if (document.selection) {//ie10 9 8 7 6 5
console.log("ie-selection--", obj)
var range = document.selection.createRange();//创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
</script>
</html>
参考文章:https://blog.csdn.net/my98800/article/details/64442105