焦点

焦点

4 人关注该话题

u-input 怎么在自动聚焦+隐藏软键盘的情况下不失去焦点 焦点 input 软键盘

分类: uni-app l***@lenovo.com 2023-01-26 17:21  回复问题 • 1 人关注 • 1 个回复 • 60 次浏览

uni-easyinput在pda中使用fouce属性无法获取焦点 焦点

分类: uni-app 8***@qq.com 2022-11-23 18:36  回复问题 • 3 人关注 • 1 个回复 • 76 次浏览

【报Bug】uni.hideKeyboard()会导致失去焦点 焦点

分类: uni-app 7***@qq.com 2022-10-10 11:17  回复问题 • 8 人关注 • 7 个回复 • 1493 次浏览

nvue下,实体键盘有时候会触发焦点plus.key.addEventListener无法监听 焦点 uniapp nvue

分类: uni-app / nvue 梁山佬酒 2022-10-09 14:17  回复问题 • 1 人关注 • 1 个回复 • 78 次浏览

view加@click之后,用键盘方向键控制会看到有焦点在移动。怎么能取消不用这种焦点 uniapp 焦点

分类: uni-app 1***@qq.com 2022-08-16 14:55  回复问题 • 2 人关注 • 5 个回复 • 119 次浏览

电视app 有的电视有焦点 有的电视没有焦点 焦点 App

分类: uni-app [已删除] 2020-12-25 11:54  回复问题 • 3 人关注 • 2 个回复 • 506 次浏览

uni-app如何通过事件设置焦点 焦点

分类: uni-app 风残落叶 2020-07-03 16:57  回复问题 • 1 人关注 • 1 个回复 • 1466 次浏览

求大神指教input框获取焦点时如何全选文本 焦点

分类: uni-app c***@163.com 2020-05-18 14:48  发起问题 • 1 人关注 • 0 个回复 • 574 次浏览

【报Bug】textarea标签设置focus获取焦点,软键盘闪退 弹出软键盘 焦点 bug已修复

分类: uni-app DCloud_UNI_GSQ 2020-05-11 16:31  回复问题 • 4 人关注 • 5 个回复 • 1051 次浏览

uni-app 强制焦点在一个特定的输入框 input 内? Vue uniapp focus 焦点

分类: uni-app z***@outlook.com 2020-01-14 14:16  发起问题 • 1 人关注 • 0 个回复 • 830 次浏览

更多...
1

赞同来自: Trust

这个问题重难点在于两个【获得输入框键盘焦点】和【光标移动到最后】。

【获得输入框键盘焦点】我在[mui初级入门教程(五)— 聊聊即时通讯(IM),基于环信 web im SDK](https://segmentfault.com/a/119000000572... 显示全部 »
这个问题重难点在于两个【获得输入框键盘焦点】和【光标移动到最后】。

【获得输入框键盘焦点】我在[mui初级入门教程(五)— 聊聊即时通讯(IM),基于环信 web im SDK](https://segmentfault.com/a/1190000005729743#articleHeader12)一文中提到过,方法如下:
```javascript
// 获得输入框键盘焦点
var msgTextFocus = function(obj){
obj.focus();
setTimeout(function() {
obj.focus();
}, 150);
}
```
【光标移动到最后】参考网上一文[input、textarea、div(contenteditable=true)光标定位到最后](http://www.cnblogs.com/duhongyu216/articles/3560548.html)可以解决。
```
// 光标移动到最后
function msgTextLastPos(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}
else if (document.selection) {//ie10 9 8 7 6 5
var range = document.selection.createRange();//创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
```

完整代码:
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>富文本编辑器</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
<style>
*{
margin: 0;
padding: 0;
-webkit-user-select: auto;
}
.wrap{
width: 80%;
margin: 20px auto;
box-shadow: #272727 0px 0px 5px;
}
.edit_wrap{
width: 96%;
padding: 2%;
overflow: auto;
line-height: 1.5;
outline: none;
border: 1px solid #eee;
}
.icon{
width: 25px;
}

button.mui-btn{
width: 80%;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="edit_wrap" contenteditable="true"></div>
</div>
<button id="add" type="button" class="mui-btn mui-btn-blue mui-btn-block">添加图片</button>

<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var msgText = document.querySelector(".edit_wrap");
document.querySelector('#add').addEventListener('tap',function () {
// 添加图片
var img = document.createElement("img");
img.src = "img/qq.png";
img.className = "icon";
msgText.appendChild(img);

// 光标移动到最后
msgTextLastPos(msgText);
// 获得输入框键盘焦点
msgTextFocus(msgText);
})

// 获得输入框键盘焦点
var msgTextFocus = function(obj){
obj.focus();
setTimeout(function() {
obj.focus();
}, 150);
}
// 光标移动到最后
function msgTextLastPos(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}
else if (document.selection) {//ie10 9 8 7 6 5
var range = document.selection.createRange();//创建选择对象
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
</script>
</body>
</html>
```
更多...
更多...