如何在 Typescript 中的文本框上创建“发光”效果？

Question

我最近安装了 DevExtreme（来自 Dev Express 网站），因为我正在寻找一种为多个移动设备创建单一解决方案的方法（该软件允许这样做）。创建了一个“基本”Typescript 项目后，我觉得无法让它工作真是太白痴了！

下图显示了与预期效果类似的内容：

但是，我在为某些设备复制此内容时遇到了一些困难。例如，windows Phone 会自动执行此操作，而 IOS 设备则不会，并且保持“正常”状态。 :(

我按照here 的建议复制了所有内容，但仍然文本框拒绝为我“发光”！

我的脚本：

<script>
    $(function () {
        $("#glow-trigger").on('click', function (e) {
            var glower = $('.glow');
            window.setInterval(function () {
                glower.toggleClass('active');
            }, 1000);
        });
    });
</script>

我的 CSS：

.glow {
    background-color: #ccc;
    border: 1px solid transparent;    
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
       -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
            transition: border 0.1s linear, box-shadow 0.1s linear;
}

.glow.active {
    border-color: blue;
    -webkit-box-shadow: 0 0 5px blue;
       -moz-box-shadow: 0 0 5px blue;
            box-shadow: 0 0 5px blue;
}

“实践”HTML：

 <div class="home-view" data-options="dxContent : { targetPlaceholder: 'content' } ">
        <br />
        <p class="hovertest">
            <button id="myButton" onclick="sayHello()"> this is a button</button>
        </p>
        <br />
        <h1>this is a heading</h1>
        <br />
       <h2>another heading</h2>
        <br />
        <a id="glow-trigger" href="#tomytextbox">Click Me</a>
        <p>this is normal text</p><div data-bind="dxTextBox: {}"></div>

        <div id="tomytextbox">
            <input class="glow" type="text" />
        </div>
        <div data-bind="dxMultiView: { height: 300, items: [{ text: 'Drag me to left' }, { text: 'drag me to right' }] }"></div>
     </div>

如果我做错了什么蠢事，请告诉我！

谢谢:)

Answer 1

我希望这是你想要的：

CSS：

.glow:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1); }

Working Fiddel

编辑：

正如你所说，它不适用于IOS

我不认为这样做是被禁止的。尽管我认为 Apple 会建议是否有必要标记选定的文本字段，但您应该考虑将视图拆分为多个屏幕。单个屏幕不应该太杂乱。

但是，如果在您的情况下这是不可能的或不想要的，实现“发光效果”的最简单方法是这样（根据需要修改值）：

#import <QuartzCore/QuartzCore.h>

textField.layer.masksToBounds = NO;
textField.layer.shadowColor = [[UIColor blueColor] CGColor];
textField.layer.shadowOffset = CGSizeZero;
textField.layer.shadowRadius = 10.0f;
textField.layer.shadowOpacity = 1.0;

（不要忘记将 Quarz 框架添加到您的项目中）

看起来像这样：

Answer 2

这就是 bootstrap 3 的做法：

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

当 CSS :focus 完成这项工作时，你为什么使用 JS？