我有一个有一个输入字段（如搜索引擎）的网站，我autofocus在其上使用 HTML5属性。
但是在非常小的屏幕尺寸上，许多设备上弹出的软键盘会遮挡太多屏幕。
是否可以在 CSS 媒体查询中设置 autofocus 属性，使其仅在较大的显示器上处于活动状态？
我知道我可以用 Javascript 设置焦点，但现在页面不使用任何 Javascript，如果可以使用 CSS，我宁愿避免它。
我在组件中定义了自定义指令“focus”：
<script>
export default {
name: 'demo',
data () {
return {
show: true
}
},
methods: {
showInput () {
this.show = false
}
},
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
}
这是我的 html 模板：
<template>
<div>
<input type="number" id="readonly" v-if="show">
<button type="button" @click="showInput" v-if="show">show</button>
<input type="number" id="timing" v-model="timing" v-if="!show" v-focus>
</div>
</template>
但是当我点击 时button，input#timing不能自动对焦。
当我把input#readonly和button成div，只使用一个V-如果，input#timing可以自动对焦 …
我需要在android上实现一个使用相机的应用程序,它需要持续关注对象.每当用户更改相机位置时,它应自动对焦于该位置(非常像Google Goggles).
现在我使用以下代码:
camera.requestautofocus(autofocuscallbak);
这很好用,但不是连续的......
我为硕士论文编写了一个适用于Android 3.1的Motorola Xoom平板电脑的应用程序，该应用程序可以使用其相机实时扫描多个QR码，并通过识别的QR码在显示屏上显示其他信息。
识别是通过ZXing安卓应用（http://code.google.com/p/zxing/）完成的，我基本上只是更改了ZXing应用的代码，以便它可以同时识别多个QR码，并且可以连续进行此扫描，而不会像原始应用一样成功扫描后冻结。因此，我的应用程序基本上是ZXing应用程序，可以连续扫描多个QR码。
但是我面临一个问题：
ZXing应用程序进行某种连续的自动对焦。它会启动自动对焦，完成后会再次自动启动自动对焦。但是这种方法会以某种方式使相机的亮度设置太亮，从而使相机无法识别QR码，因为图像几乎是全白的。禁用自动对焦可以解决该问题，但是我需要自动对焦，因为否则只能在一定距离下才能识别QR码。
我无法在谷歌浏览器以外的任何浏览器上重现这一点.随机加载页面时,它会在加载页面时向下滚动到页面的50-75%.
没有JS触发这个.
更糟糕的是它并不一致.大多数时候我都会在新标签中打开页面.我改变网址的某些时候会发生.页面刷新时发生的次数很少.
我甚至不知道如何调试这类问题.以前有人经历过吗？知道变通方法吗？可能的原因？
它绝对不是"滚动到iframe"的问题,因为我删除了所有iframe /帧.
我也禁用了所有扩展程序.它仍然在发生.
编辑:禁用javascript对此行为没有影响.
我想知道是否有人能解决这个难题？如果在输入元素上设置了自动对焦,该输入元素不在页面的着陆部分中,则当用户单击菜单标签转到该部分时,自动对焦将丢失.(例如,可能有表格的联系部分)......
我在Android中使用Camera API 2并尝试应用自动对焦功能.自动对焦与后置摄像头正常工作,但前置摄像头无法正常工作.
(我使用的是Android 5.1和6.0设备)
详情:
这是启动自动对焦的触发器:
mPreviewRequestBuilder.set(CaptureRequest.CONTROL_AF_TRIGGER, CameraMetadata.CONTROL_AF_TRIGGER_START);
这是CameraCaptureSession.CaptureCallback
Integer afState = result.get(CaptureResult.CONTROL_AF_STATE);
如果我使用前置摄像头,afState的值总是0(非活动).但是使用后置摄像头,该值从2(CONTROL_AF_STATE_PASSIVE_FOCUSED - 尝试聚焦)变为4(焦点成功时CONTROL_AF_STATE_FOCUSED_LOCKED)或5(焦点失败时CONTROL_AF_STATE_NOT_FOCUSED_LOCKED).
你们有没有想过为什么我不能在前置摄像头上使用自动对焦？
如何使用试剂在元素上设置自动焦点属性，以便生成的 HTML 如下所示？
<textarea autofocus></textarea>
当然，效果是一旦页面加载，文本区域将成为浏览器的焦点。
我正在使用Semantic React UI 的 Dropdown，我希望它在其父组件安装后立即获得焦点：用户应该能够立即搜索。
我尝试使用render()父级的引用：
<Dropdown ref={dd => (this.MyDropdown = dd)}
... />
...然后componentDidMount在父组件的函数中调用它的焦点。但是Dropdown没有功能focus，所以这个方法行不通。
componentDidMount() {
// I want to do something like the next line here, but 'focus' is not available on the component.
//this.MyDropdown.focus();
}
那我应该怎么做呢？
这是我迄今为止在 codeandbox 上尝试过的。请注意 中注释掉的行componentDidMount。
加载内部有输入文件的组件后。我怎样才能专注于那个特定领域？
TextField.svelte
<script>
export let label = ''
export let name = ''
export let placeholder = ''
export let value = ''
</script>
<div class="field">
<label for={name}>{label}</label>
<input {placeholder} type="text" {name} bind:value={value} >
<slot></slot>
</div>
App.svelte
<script>
import TextField from './TextField'
import {onMount} from 'svete'
onMount(() => {
// This line is funny.. I know
document.querySelector('[name="firstname"]').focus()
})
</script>
<TextField label="First Name" name="firstname" />