0

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

下面显示了类似于所需效果的内容：

文本输入，聚焦的文本框“发光”

但是，我在为某些设备复制这个时遇到了一些困难。例如，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>

如果我做错了什么愚蠢的错误，请告诉我！

谢谢 ：）

4

2 回答 2

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 框架添加到您的项目中）

它看起来像这样： 在此处输入图像描述

于 2014-09-12T14:20:50.700 回答
0

这就是 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 完成这项工作时，为什么要使用 JS :focus？

于 2014-09-12T14:09:17.097 回答