uni-app hbulderx 插件 WebViewDialog 无法设置输入框自动聚焦
uni-app hbulderx 插件 WebViewDialog 无法设置输入框自动聚焦
| 产品分类 | PC开发环境操作系统 | PC开发环境操作系统版本号 | HBuilderX版本号 |
|---|---|---|---|
| HbuilderX | Windows | 10 | 3.4.6 |
操作步骤：
创建hbulderx插件WebViewDialog示例，输入框设置自动聚焦 ，运行无效，在普通浏览器可以自动聚焦
预期结果：
输入框可以自动聚焦
实际结果：
const path = require('path');
const vueFile = path.join(path.resolve(__dirname), 'static', 'vue.min.js');
const bootstrapCssFile = path.join(path.resolve(__dirname), 'static', 'bootstrap.min.css');
const customCssFile = path.join(path.resolve(__dirname), 'static', 'custom.css');
function Html(projectData) {
projectData = JSON.stringify(projectData)
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${bootstrapCssFile}">
<link rel="stylesheet" href="${customCssFile}">
<script src="${vueFile}"></script>
</head>
<body>
<div id="app" v-cloak>
<form>
<div class="form-group row m-0 mt-3">
<label for="repo-type" class="col-sm-2 col-form-label">应用包名</label>
<div class="col-sm-10">
<input v-focus type="text" class="form-control outline-none" v-model="appInfo.packageName" placeholder="应用包名"/>
</div>
</div>
</form>
</div>
<script>
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
});
var app = new Vue({
el: '#app',
data: {
appInfo: {
publishType: "AppStore",
platforms: [],
name: "",
packageName: "",
versionName: "",
versionCode: "",
description: "",
changelog: "",
icon: "",
screenshot: ""
}
},
computed: {
publishPlatforms() {
let publishType = this.appInfo.publishType;
this.appInfo.platforms = [];
if (publishType == 'AppStore') {
return [
{"id":"huawei","name": "华为"}, {"id":"yyb","name": "应用宝"}, {"id":"xiaomi","name": "小米"},
{"id":"360","name": "360"}, {"id":"vivo","name": "vivo"}, {"id":"oppo","name": "oppo"}
];
} else {
return [{"id":"fir","name": "fir.im"}, {"id":"pgyer","name": "蒲公英"}];
}
}
},
created() {
// let projectData = ${projectData};
// let {name,versionName,versionCode, description, appid } = projectData;
// this.appInfo.name = name;
// this.appInfo.versionName = versionName;
// this.appInfo.versionCode = versionCode;
// this.appInfo.description = description;
// this.appInfo.packageName = appid;
},
mounted() {
this.$nextTick(() => {
window.addEventListener('hbuilderxReady', () => {
this.getResult();
this.btnClick();
})
});
},
methods: {
selectPlatforms(data) {
let tmp = this.appInfo.platforms;
if (tmp.includes(data)) {
this.appInfo.platforms = tmp.filter(item => item != data );
} else {
this.appInfo.platforms.push(data);
};
},
uploadImg(imgType) {
hbuilderx.postMessage({
command: 'uploadImg',
data: imgType
});
},
getResult() {
hbuilderx.onDidReceiveMessage((msg) => {
if (msg.command == 'img') {
if (msg.imgType == 'icon' ) {
this.appInfo.icon = msg.data;
};
if (msg.imgType == 'screenshot' ) {
this.appInfo.screenshot = msg.data;
};
};
});
},
btnClick() {
hbuilderx.onDidReceiveMessage((msg)=>{
if(msg.type == 'DialogButtonEvent'){
let button = msg.button;
if(button == '开始提交'){
hbuilderx.postMessage({
command: 'submitApp',
data: this.appInfo
});
} else if(button == '关闭'){
hbuilderx.postMessage({
command: 'closed'
});
};
};
});
}
}
});
</script>
</body>
</html>
`;
module.exports = Html; 
1 回复
在使用 uni-app 和 HBuilderX 进行开发时，如果你在使用 WebViewDialog 插件时遇到无法设置输入框自动聚焦的问题，可能是由于以下几个原因导致的：
1. WebView 的安全限制
- WebView 在某些情况下可能会限制自动聚焦功能，特别是在页面加载完成后立即尝试聚焦输入框时。这可能是出于安全考虑，防止恶意脚本自动聚焦输入框。
2. 焦点设置时机问题
- 如果你在页面加载时立即尝试聚焦输入框，可能 DOM 元素还没有完全加载完成，导致聚焦失败。建议在页面加载完成后再尝试聚焦。
3. WebViewDialog 的限制
WebViewDialog插件本身可能存在一些限制，导致无法直接通过 JavaScript 设置自动聚焦。你可以尝试通过其他方式来实现聚焦。
解决方案
1. 延迟聚焦
你可以使用 setTimeout 延迟一段时间后再尝试聚焦输入框，确保 DOM 元素已经加载完成。
setTimeout(function() {
document.getElementById('inputId').focus();
}, 500); // 延迟 500 毫秒2. 手动触发聚焦
在某些情况下，手动触发聚焦可能更有效。你可以在用户点击某个按钮或执行某个操作后手动聚焦输入框。
document.getElementById('inputId').focus();3. 使用原生能力
如果 WebViewDialog 无法满足你的需求，你可以考虑使用 uni-app 提供的原生能力，如 plus.webview 来控制 WebView 的行为。
var webview = plus.webview.create('your-url.html');
webview.show();4. 检查 WebView 设置
确保你的 WebView 配置允许 JavaScript 执行，并且没有其他限制导致无法聚焦输入框。
var webview = plus.webview.create('your-url.html', 'your-id', {
enable: 'javascript:yes'
});