Question

我有一个普通的HTML输入框：<input id="ip">。

此输入框已集中。我通过查看屏幕以及document.activeElement告诉我的事实来了解这一点。

现在我要替换此输入节点。我这样做：var the_new_node = document.createElement("input"); the_new_node.id="ip"; the_input_node.replaceWith(the_new_node);

但是，当我这样做时，输入框失去焦点。 document.activeElement现在指向身体。反正有没有阻止这个？

编辑：我知道我可以致电.focus()。然而，在我的代码中，我不一定知道要替换的节点中是否有input。

例如，在各种“虚拟dom”实现中，它们在保留焦点的同时替换dom树的片段。他们是怎么做到的？

Answer 1

如果您想要只关注新输入，如果您要替换的元素内部有一个聚焦元素，您可以使用18/01/24 15:54:12 INFO RMProxy: Connecting to ResourceManager at ip-XXX-YY-YY-ZZZ.us-west-2.compute.internal/XXX.YY.YY.ZZZ:8032 18/01/24 15:54:12 INFO Client: Requesting a new application from cluster with 2 NodeManagers 18/01/24 15:54:12 INFO Client: Verifying our application has not requested more than the maximum memory capability of the cluster (11520 MB per container) 18/01/24 15:54:12 INFO Client: Will allocate AM container, with 1408 MB memory including 384 MB overhead 18/01/24 15:54:12 INFO Client: Setting up container launch context for our AM 18/01/24 15:54:12 INFO Client: Setting up the launch environment for our AM container 18/01/24 15:54:12 INFO Client: Preparing resources for our AM container 18/01/24 15:54:14 WARN Client: Neither spark.yarn.jars nor spark.yarn.archive is set, falling back to uploading libraries under SPARK_HOME. 18/01/24 15:54:18 INFO Client: Uploading resource file:/mnt/tmp/spark-89654b91-c4db-4847-aa4b-22f27240daf7/__spark_libs__8429498492477236801.zip -> hdfs://ip-XXX-YY-YY-ZZZ.us-west-2.compute.internal:8020/user/hadoop/.sparkStaging/application_1516806627838_0002/__spark_libs__8429498492477236801.zip 18/01/24 15:54:22 INFO Client: Uploading resource s3://projects/wordcount/wordcount.py -> hdfs://ip-XXX-YY-YY-ZZZ.us-west-2.compute.internal:8020/user/hadoop/.sparkStaging/application_1516806627838_0002/wordcount.py 18/01/24 15:54:22 INFO S3NativeFileSystem: Opening 's3://projects/wordcount/wordcount.py' for reading 18/01/24 15:54:22 INFO Client: Uploading resource file:/usr/lib/spark/python/lib/pyspark.zip -> hdfs://ip-XXX-YY-YY-ZZZ.us-west-2.compute.internal:8020/user/hadoop/.sparkStaging/application_1516806627838_0002/pyspark.zip 18/01/24 15:54:22 INFO Client: Uploading resource file:/usr/lib/spark/python/lib/py4j-0.10.4-src.zip -> hdfs://ip-XXX-YY-YY-ZZZ.us-west-2.compute.internal:8020/user/hadoop/.sparkStaging/application_1516806627838_0002/py4j-0.10.4-src.zip 18/01/24 15:54:22 INFO Client: Uploading resource file:/mnt/tmp/spark-89654b91-c4db-4847-aa4b-22f27240daf7/__spark_conf__8267377904454396581.zip -> hdfs://ip-XXX-YY-YY-ZZZ.us-west-2.compute.internal:8020/user/hadoop/.sparkStaging/application_1516806627838_0002/__spark_conf__.zip 18/01/24 15:54:22 INFO SecurityManager: Changing view acls to: hadoop 18/01/24 15:54:22 INFO SecurityManager: Changing modify acls to: hadoop 18/01/24 15:54:22 INFO SecurityManager: Changing view acls groups to: 18/01/24 15:54:22 INFO SecurityManager: Changing modify acls groups to: 18/01/24 15:54:22 INFO SecurityManager: SecurityManager: authentication disabled; ui acls disabled; users with view permissions: Set(hadoop); groups with view permissions: Set(); users with modify permissions: Set(hadoop); groups with modify permissions: Set() 18/01/24 15:54:22 INFO Client: Submitting application application_1516806627838_0002 to ResourceManager 18/01/24 15:54:23 INFO YarnClientImpl: Submitted application application_1516806627838_0002 18/01/24 15:54:23 INFO Client: Application report for application_1516806627838_0002 (state: ACCEPTED) 18/01/24 15:54:23 INFO Client: client token: N/A diagnostics: N/A ApplicationMaster host: N/A ApplicationMaster RPC port: -1 queue: default start time: 1516809262990 final status: UNDEFINED tracking URL: http://ip-XXX-YY-YY-ZZZ.us-west-2.compute.internal:20888/proxy/application_1516806627838_0002/ user: hadoop 18/01/24 15:54:23 INFO ShutdownHookManager: Shutdown hook called 18/01/24 15:54:23 INFO ShutdownHookManager: Deleting directory /mnt/tmp/spark-89654b91-c4db-4847-aa4b-22f27240daf7 Command exiting with ret '0'准确编码：

＆＃13;

.contains(document.activeElement)

＆＃13;

function runReplace(idx) {
  document.querySelectorAll("input")[0].focus();
  setTimeout(() => {
    let p = document.getElementById("par").children[idx];
    let wasFocused = p.contains(document.activeElement);
    let newNode = document.createElement("input");
    newNode.type = "text";
    newNode.value = "replacement for child #" + idx;
    p.replaceWith(newNode);
    if (wasFocused)
      newNode.focus();
    
    console.log("Replaced ", p, " with an input; wasFocused=", wasFocused);
  }, 3000);
}

＆＃13;

浏览器没有神奇的方式可以保存＆＃34;专注于用另一个任意子树替换任意DOM子树，所以你必须手动完成。

在保持焦点的同时替换输入DOM节点

1 个答案: