时间戳

首页 > 解决方案 > 单击时将跨度变成可编辑字段的试剂

clojurescript - 单击时将跨度变成可编辑字段的试剂

问题描述

创建一个 figwheel/cljs/clj 应用程序，当用户点击一个按钮时在前端工作

我一直在阅读有关焦点切换和试剂/dom-node 的信息，但鉴于我在网页上显示了 innerHTML aka“真实值”，我将如何设置 on-click="" 以将光标移动到内部html（跨度）之外的组件并使其可编辑并且光标开始闪烁。

多谢你们

不确定你们是否想要一个代码片段，但有一个小部件，它几乎说明了以下内容：

{:type     :plain-icon-button
 :label    [:i.ti-pencil-alt]
 :tooltip  "Click here to edit"
 :attr     {:tab-index -1}
 :on-click (fn [] (prn "What do i do here :( ")}

再次感谢伙计们

标签： clojurescriptreagentreagent-forms

解决方案

一个简单的解决方案是让两个字段都存在，使用 CSS 属性display: none;来切换它们，因此一次只有 1 个可见。在打嗝：

(:require
  [garden.core :as garden]
  [goog.style :as style]

[:div
  [:button#mybtn     {:display :initial}]
  [:textfield#mytf   {:display :none   }]]

然后使用切换样式{:onclick hide-btn}

(defn install-css [css-def]
  (let [css-str (garden/css css-def)]
    (style/installStyles css-str)
    css-str))

(defn hide-btn []
  (install-css [:#mybtn {:display :none   }] )
  (install-css [:#mytf  {:display :initial}] ))

您还可以试验CSSvisible属性。

推荐阅读