问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js 如何做到这样的效果

头像
陈东民
    2.1k41438

    图片描述

    因为中文的关系， 一直无法做出这样的效果。

    解释下效果：两个输入框，第一个输入框输入字符（ 中文输入法是重点 ），立马激活第二个输入框，并且得到第一个输入框的字符。当然了英文状态下面十分简单，中文状态下怎么做到呢

    html5javascript
    阅读 2.4k
    3 个回答
    得票最新
    头像
    陈东民
      2.1k41438
      ✓ 已被采纳

      摸索了一天终于明白了，首先通过js是不可能完成这种效果的，因为IME输入法的原因。但是可以换一种思路，通过障眼法完成这种效果。（ 最近在搞一个批注效果的东西，用到了这种手法 ^^）
      https://codepen.io/chendonmin...

      头像
      一点痕寂
        626

        可以直接通过楼主说的 “障眼法” 这个就挺好的。

        <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div>
    <input type="text" id="aa" style="height: 30px;">
    <br><br><br><br><br><br><br>
    <div style="position: relative">
        <input type="text" style="height: 30px;">
        <input type="text" id="bb" style="position: absolute; left: 0px; top: 0px; height: 30px;">
    </div>
</div>

<script>
    window.onload = function () {
        var dd = document.getElementById("bb");
        dd.onkeydown = function () {
            dd.style.top = '-162px'
        }
    }
</script>
</body>
</html>
        头像
        青ツ玉
          6495923

          第一个输入框focus事件中处理：聚焦第二个输入框，隐藏第一个输入框；
          第二个输入框blur事件中处理：显示第一个输入框

          onfocus
          onblur

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题