我正在尝试在页面加载时将默认焦点设置在输入框上(例如:google).我的页面非常简单,但我无法弄清楚如何做到这一点.
这是我到目前为止所得到的:
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
为什么这种方法不能正常工作呢？
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{ …我似乎回想起以前版本的HTML中的大多数(可能是所有)属性(在HTML5之前)需要具有值的属性,例如readonly="readonly".
对于HTML5和autofocus属性,这是真的吗？
我有一个编辑文本:
<LinearLayout android:id="@+id/linearLayout7" android:layout_width="match_parent" android:layout_height="wrap_content">
<EditText android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1" android:id="@+id/editText1" android:text="3">
<requestFocus></requestFocus>
</EditText>
<Button android:text="Button" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/button2"></Button>
</LinearLayout>
然后是其他一些东西
我遇到的问题是,当应用程序启动时焦点在输入上,我不希望在应用程序启动时焦点在输入上.
我试过删除
<requestFocus></requestFocus>
事情,它没有做任何事情.
在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">
//<![CDATA[
var button = document.getElementById('focus-test-button');
var input = document.getElementById('focus-test-input');
input.addEventListener('focusin', function(event) {
console.log('focus');
console.log(event);
});
button.addEventListener('click', function() {
// *** If …在iOS8之前,.focus()在输入元素上使用Javascript 方法似乎没有效果(虚拟键盘不会显示).在最新的iOS 8版本之后,运行该.focus()方法似乎对页面加载没有影响,但是一旦用户触摸屏幕上的任何地方,虚拟键盘将立即出现并将页面滚动到焦点对准的元素.(当我使用HTML属性"autofocus"时,这也是一个问题)
此更改导致我的网站上的iOS8用户出现问题.当用户尝试单击页面上的按钮时,突然滚动和键盘外观会导致他们无意中单击屏幕下方的按钮.
我假设这是iOS8中的一个错误而不是故意的功能,我的问题是解决这个问题最有效的解决方案是什么？
navigator.userAgent每次使用该.focus()方法时,是否必须检查设备是否为iOS8 ？
import { Component, ViewChild} from '@angular/core';
import { Keyboard } from 'ionic-native';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
@ViewChild('input') myInput ;
constructor() {}
ionViewDidLoad() {
setTimeout(() => {
Keyboard.show() // for android
this.myInput.setFocus();
},150);
}
}
1)导入"ViewChild"
import {Component, ViewChild} from '@angular/core';
2)在html模板中创建对输入的引用:
<ion-input #focusInput></ion-input>
3)使用@ViewChild访问您刚才引用的输入组件.
@ViewChild('focusInput') myInput ;
4)触发焦点
每次加载视图/页面时,使用ionViewLoaded()方法触发它.
需要setTimeout
ionViewLoaded() {
setTimeout(() => {
Keyboard.show() // for android
this.myInput.setFocus();
},150); //a least 150ms.
}
4)在Android上显示键盘
import { Keyboard } from 'ionic-native';
调用Keyboard.show()在Android上调用键盘.
5)在iOS上显示键盘 …
是否可以将自动对焦设置为我的xaml文件中的文本框？
<Window x:Class="WpfApplication1.Views.Test1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="100"
Width="210"
WindowStartupLocation="CenterOwner"
ShowInTaskbar="False"
Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
ResizeMode="CanResizeWithGrip">
<TextBox HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" TextWrapping="Wrap" AcceptsReturn="True" Text="{Binding Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Window>
我在SO上看过类似的问题,包括这个问题,这个问题已经过时了.我阅读并关注了链接,但目前还不清楚今天是否有适当的解决方案.
我的底层问题是我placeholder="..."在输入字段上使用HTML .通过自动聚焦在第一个字段上,其占位符对用户不再可见.
编辑
这是我的HTML代码:
<div id='LOGIN_FORM' title="Login">
<form action="">
<input type="text" name="login_id" required="required"
placeholder="Enter user ID" /><br />
<input type="password" name="login_pwd" required="required"
placeholder="Enter password" /><br />
</form>
</div>
这是我的JS代码:
$("#login").click(function() {
$("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); }
}
] });
});
对于Android API 2.1及更高版本,我们可以使用上下文:
getPackageManager().hasSystemFeature(PackageManager.FEATURE_CAMERA_AUTOFOCUS)
但在2.1版之前,我们如何执行相同的操作？有没有这样的东西不涉及调用Camera.open然后getParameters呢？
我想知道是否可以在iPhone应用程序中收到有关自动对焦的通知？
IE,是否存在自动对焦开始,结束,如果成功或失败时被通知的方式......？
如果是这样,这个通知名称是什么？
autofocus ×10
focus ×3
javascript ×3
android ×2
camera ×2
html ×2
html5 ×1
input ×1
input-field ×1
ionic2 ×1
ios ×1
iphone ×1
jquery ×1
onload ×1
placeholder ×1
setfocus ×1
textbox ×1
uikeyboard ×1
wpf ×1
xaml ×1