Js的focus()焦点事件改变光标位置，获取子节点，父节点

zhangsan3333

已于 2022-02-05 15:08:40 修改

阅读量2.2k

点赞数

文章标签： javascript 前端 css

于 2022-02-05 09:17:28 首次发布

aaa

本文链接：https://blog.csdn.net/djydjy3333/article/details/122787971

版权

javascript 指定したhtml要素にフォーカスを当てる

JS获取子节点、父节点和兄弟节点的方法实例总结

changeCursor.jsp

<%--
  Created by IntelliJ IDEA.
  User: U100926
  Date: 2022/02/04
  Time: 18:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
    <link rel="stylesheet"
          href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
          integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</head>
<style>
    .main {
        margin: 0 auto;
        margin-top: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 25px;
    }
</style>
<script>
    function hoge() {
        // ランダムなidにフォーカスを移動させる
        document.getElementById("txt" + Math.floor(Math.random() * 5 + 1)).focus();
    };
</script>

<body>
<div class="main">

    <h5 id="base"><span class="badge badge-secondary">ランダムにフォーカスを当てる</span></h5>

    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">テキストフォーム1</label>
            <input type="text" class="form-control" id="txt1">
            <label for="exampleInputEmail1">テキストフォーム2</label>
            <input type="text" class="form-control" id="txt2">
            <label for="exampleInputEmail1">テキストフォーム3</label>
            <input type="text" class="form-control" id="txt3">
            <label for="exampleInputEmail1">テキストフォーム4</label>
            <input type="text" class="form-control" id="txt4">
            <label for="exampleInputEmail1">テキストフォーム5</label>
            <input type="text" class="form-control" id="txt5">
        </div>
    </form>

    <button type="button" class="btn btn-raised btn-primary" onclick="hoge()">フォーカス移動</button>

</div>
</body>
</html>

在这里插入图片描述

zhangsan3333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js的focus()焦点事件改变光标位置，获取子节点，父节点

changeCursor.jsp<%-- Created by IntelliJ IDEA. User: U100926 Date: 2022/02/04 Time: 18:29 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html l
复制链接

扫一扫