0

最近、複数のモバイル デバイス用の単一のソリューションを作成する方法を探していたため、DevExtreme (Dev Express Web サイトから) をインストールしました (このソフトウェアはそれを可能にします)。「基本的な」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 が推奨すると思いますが、ビューを複数の画面に分割することを検討する必要があります。1 つの画面が乱雑になりすぎないようにします。

ただし、あなたのケースでそれが不可能または望ましくない場合、「グロー効果」を実現する最も簡単な方法は次のとおりです (必要に応じて値を変更します)。

#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

これは、ブートストラップ 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);
}

:focusCSSが仕事をしているのに、なぜ JS を使用しているのですか?

于 2014-09-12T14:09:17.097 に答える