css - 如何在 Typescript 的文本框上创建 'glow' 效果？

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 会建议是否有必要标记选定的文本字段，但您应该考虑将 View 拆分为多个屏幕。单个屏幕不应过于困惑。

但是，如果在您的情况下这是不可能的或不需要的，那么实现“发光效果”的最简单方法就是这个(根据您的需要修改值):

#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 框架添加到您的元素中)

它看起来像这样: