如何在打字稿中的文本框上創建“發光”效果？

Question

我最近在安裝DevExtreme（來自Dev Express網站），當時我正在尋找一種為多個移動設備創建單一解決方案的方法（該軟件允許這樣做）。 創建了“基本”打字稿項目后，我感到非常愚蠢，因為無法使其正常工作！

下面顯示了與所需效果相似的內容：

但是，我在復制某些設備時遇到一些困難。 例如，Windows Phone會自動執行此操作，而IOS設備則不會，並且保持“正常”狀態。 :(

我在這里遵循建議，並復制了所有內容，但文本框仍然拒絕為我“發光”！

我的劇本：

<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); }

工作菲德爾

編輯：

正如您所評論的，它不適用於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 Framework添加到您的項目中）

它看起來像這樣：

Answer 2

這是引導程序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？