使用 knockoutJs css 绑定时如何删除文本区域边框（轮廓）？

Question

我有一个文本区域，我想使用挖空 css/attr 绑定和 hasFocus 绑定移除焦点上的轮廓光晕。但是轮廓发光并没有重置焦点。提前谢谢你。

var viewModel = {
  isFocus: ko.observable(false),
  outlineglow: ko.observable()
};

viewModel.isFocus.subscribe(function(focus) {
  if (focus) {
    viewModel.outlineglow("none");
  }
});

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<textarea data-bind="hasFocus: isFocus, attr: { 'focus:outline': outlineglow }"> </textarea>

Answer 1

您可以使用 style 绑定来根据 isFocus 可观察对象设置 outline：

var viewModel = {
  isFocus: ko.observable(true)
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<textarea data-bind="hasFocus: isFocus, style: { outline:  isFocus() ? 'none' : '1px dashed red'}"> </textarea>

如果您想在焦点上应用很多 style，您可以使用 css 绑定绑定一个 class：

var viewModel = {
  isFocus: ko.observable(true)
};

ko.applyBindings(viewModel);

.focused {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
  border-radius: 2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<textarea data-bind="hasFocus: isFocus, css: { focused:  isFocus() }"> </textarea>

使用 knockoutJs css 绑定时如何删除文本区域边框（轮廓）？

How to remove text area border (outline) when focused on with knockoutJs css binding?

css

knockout.js