Question

我目前正在学习window.onload和document.onload作为html上的属性。但是我无法正确使用它们。在我的代码中，我想使用document.onload聚焦名为“ emri”的特定文本区域，但没有成功。有人会说将其用作脚本或smth，但我想将其用作标记内的属性。我在做什么错了？

 <!doctype html>
  <html lang="en">

  <head>
     <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, 
  shrink-to-fit=no">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">

<link rel="stylesheet" href="App.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
    crossorigin="anonymous">


   </head>

   <body onload="document.my-form1.emri.focus();" >

  <main class="my-form">
      <div class="container">
          <div class="row justify-content-flex-start">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">Apliko</div>
                    <div class="card-body">
                        <form name="my-form1" onsubmit=" return formValidation();">
                            <div class="form-group row">
                                <label for="emri" class="col-md-3 col-form-label text-md-right">Emri juaj:</label>
                                <div class="col-md-6">
                                    <input type="text"  class="form-control" name="emri">
                                </div>
                            </div>

Answer 1

这里是您更新的html：

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, 
  shrink-to-fit=no">


<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
	integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
	crossorigin="anonymous">

<link rel="stylesheet" href="App.css">

<link rel="stylesheet"
	href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
	integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
	crossorigin="anonymous">


</head>

<body onload="document.getElementById('emri').focus();">
	<main class="my-form">
	<div class="container">
		<div class="row justify-content-flex-start">
			<div class="col-md-6">
				<div class="card">
					<div class="card-header">Apliko</div>
					<div class="card-body">
						<form name="my-form1" onsubmit=" return formValidation();">
							<div class="form-group row">
								<label for="emri" class="col-md-3 col-form-label text-md-right">Emri
									juaj:</label>
								<div class="col-md-6">
									<input type="text" class="form-control" name="emri" id="emri"/>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	</main>
</body>
</html>

Answer 2

您只需将autofocus属性添加到输入中即可。

<input type="text"  class="form-control" name="emri" autofocus>

Answer 3

如何使用“ window.onload”没有错。它是表单的名称。由于名称中有一个“-”字符，因此您应该像这样使用它：

<body onload="document['my-form1'].elements.emri.focus();">

请参阅：Example

Answer 4

您需要选择这样

<body onload="document.getElementsByName('emri')[0].focus();">

如果您使用的是HTML5，则可以在autofocus中使用类似input的属性。

如何正确使用document.onload

4 个答案: