我制作了一个带有<input>标签的HTML页面type="text".当我在iPhone上使用Safari点击它时,页面变大(自动缩放).有人知道如何禁用它吗?
在Mobile Safari中,在设置延迟时间后,我无法将注意力集中在文本字段上.我附上一些展示问题的示例代码.如果单击该按钮,则触发.focus(),一切都按预期工作.如果你把焦点放在回调上,比如setTimeout函数,那么它只能在移动safari中失败.在所有其他浏览器中,有一个延迟,然后焦点发生.
令人困惑的是,即使在移动游猎中,也会触发"focusin"事件.这个(和SO中的〜类似〜评论)让我觉得它是一个移动的safari bug.任何指导都将被接受.
我已经在模拟器和iPhone 3GS/4 iOS4上进行了测试.
示例HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Autofocus tests</title>
<meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<meta content='yes' name='apple-mobile-web-app-capable'>
</head>
<body>
<h1>
Show keyboard without user focus and select text:
</h1>
<p>
<button id='focus-test-button'>
Should focus on input when you click me after .5 second
</button>
<input id='focus-test-input' type='number' value='20'>
</p>
<script type="text/javascript">
//<
每个方块都有自己的输入字段.其中的原因是有时可以预先填充正方形.现在,在桌面浏览器上,只要输入字符,光标就会跳转到下一个输入字段.使用类似的东西很有效:
$(this).next('input').focus();
Run Code Online (Sandbox Code Playgroud)
但是移动safari(我们在ios上测试)的问题是我不知道如何以编程方式自动"跳转"到下一个输入字段.用户可以通过"下一步"按钮完成,但有没有办法自动执行此操作?
我知道focus()触发器对ios有一些限制,但我也看到了使用合成点击等的一些解决方法.
我在下面准备了一个简单的片段,一个文本输入字段,一个按钮和一个选择.单击按钮以编程方式聚焦输入.更改选择也会聚焦输入.在所有桌面浏览器和Android中都是如此,但在iOS中则不然.在iOS中,聚焦适用于按钮,但不适用于选择.
var mySelect = document.getElementById('mySelect');
var myButton = document.getElementById('myButton');
var myTextInput = document.getElementById('myTextInput');
mySelect.addEventListener('change', function(changeEvent) {
console.log('Change event trusted: ' + changeEvent.isTrusted);
myTextInput.focus();
});
myButton.addEventListener('click', function(clickEvent) {
console.log('Click event trusted: ' + clickEvent.isTrusted);
myTextInput.focus();
});Run Code Online (Sandbox Code Playgroud)
<select id="mySelect">
<option value="0">Option 1</option>
<option value="1">Option 2</option>
</select>
<button id="myButton">Focus through onclick</button>
<input id="myTextInput" type="text" />Run Code Online (Sandbox Code Playgroud)
似乎iOS有一些本机安全保护行为来阻止可写输入的程序化焦点,以防止恼人的键盘弹出窗口.此安全措施仅拒绝某些时刻未由真实用户交互启动的事件.
根据规范定义,用户启动的事件是受信任的事件: 规范条目
isTrusted属性必须返回初始化的值.创建事件时,必须将属性初始化为false.
isTrusted是一种便利,它指示用户代理是否调度事件(而不是使用dispatchEvent()).唯一的遗留异常是click(),这会导致用户代理将isTrusted属性初始化为false的事件分派.
您可以通过我的console.log陈述看到两者click和change事件都具有其isTrusted属性true,但后者被iOS阻止.
我已经搜索了很多,但未能找到描述此iOS行为的声明.
有人对这个有了解吗?是否有工作来获得一个<select>改变事件,以成功集中输入并使键盘上升?
我已经尝试了很多方法,与大多的工作click,mouseup并mousedown …
我想在 Vue 组件出现时触发输入框聚焦(从而弹出键盘)。
它不工作iOS。
我尝试使用 Vue 的示例指令(这里)和 HTML5,autoFocus但都没有奏效。
我在沙箱 ( https://codesandbox.io/s/lw321wqkm ) 中创建了这个示例。
FWIW,我不相信这是一个 JS 限制,因为我已经看到了示例工作(例如使用 React Native Web autoFocus-请参阅示例)
<template>
<div>
<TextComp v-if='showText' />
<button @click='showText = !showText'> Show/hide input </button>
</div>
</template>
...
Run Code Online (Sandbox Code Playgroud)
<template>
<div>
<input ref='focusMe' type='text'/>
</div>
</template>
<script>
export default {
name: 'TextComp',
mounted () {
this.$refs.focusMe.focus()
}
}
</script>
Run Code Online (Sandbox Code Playgroud) 当自动聚焦场时,如何使软键盘提供自举模式? 这听起来很容易,但我还是无法做到.
焦点部分可以工作,但不是键盘.
我试图保存用户点击.
我可以利用'shown.bs.modal'并设置焦点,但软键盘不会自动显示.用户仍然需要重新占用该字段.如何强制软键盘出现.
我正在玩的代码(非常):
this.$container.on('shown.bs.modal', function () {
console.log('shown.bs.modal');
setTimeout(function () {
var $ctrl = $(jqselector);
$ctrl.addClass('active').focus();
}, 500);
});
this.$container.modal({
backdrop: (this.config.showModal ? 'static' : true)
})
.on('hidden.bs.modal', function () {
$(this).remove();
});
Run Code Online (Sandbox Code Playgroud)
编辑:稍微查看一下bootstrap代码后,看起来广告在所有处理后都会关注模态控件.我假设这样的事情正在发生,这就是为什么我添加了setTimeout,但即使有很大的延迟,也没有运气.我将在本周末更仔细地研究一下bootsrap代码
赏金编辑:Bootstrap代码:
Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
this.$element.trigger(e)
if (this.isShown || e.isDefaultPrevented()) return
this.isShown = true
this.checkScrollbar()
this.$body.addClass('modal-open')
this.setScrollbar()
this.escape()
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.backdrop(function () {
var transition = …Run Code Online (Sandbox Code Playgroud)