テキストボックス(input)でフォーカスを取得した場合のスタイル変更の実現方法
ユーザーの体験を重視するデザイナーが多いです.テキストボックスに加えてほしいです.
フォーカスやマウスの移動時のスタイルの切り替え効果を取得します.実は簡単です.ページ上のテキストボックスを取得し、オンフォークスイベントやその他の対応イベントを追加すればいいです.本稿では、どうやって
フォーカスを取得する時にスタイルを切り替え、原理がわかったら他の効果を実現するのは簡単です.
-----------------------------------------
Javascript:
＜script type=
「text/javascript」
//説明:テキストボックス(input)フォーカスを取得した場合のスタイル変更の実現方法
//整理:http://www.CodeBit.cn
//focusクラス:フォーカスを取得するときのスタイル
//normalClass:ノーマルなスタイル
Function focus Input
(focus Class、normalClass
)
{
var element=document.
getElements ByTagName
(
「input」
)0
for
(
var i=
0;ilength;i++
)
{
if
(elements
[i]
)
type!=
「button」&elemens
[i]
)
type!=
「submit」&elemens
[i]
)
type!=
「リセット」
)
{
elements
[i]
)
onfocus=
機能
(
)
{
this.
クラスName=focusクラス;
｝
elements
[i]
)
onblur=
機能
(
)
{
this.
class Name=normalClass𞓜
';
｝
)
)
)
テストコード:HTML:
フォーカスやマウスの移動時のスタイルの切り替え効果を取得します.実は簡単です.ページ上のテキストボックスを取得し、オンフォークスイベントやその他の対応イベントを追加すればいいです.本稿では、どうやって
フォーカスを取得する時にスタイルを切り替え、原理がわかったら他の効果を実現するのは簡単です.
-----------------------------------------
Javascript:
＜script type=
「text/javascript」
//説明:テキストボックス(input)フォーカスを取得した場合のスタイル変更の実現方法
//整理:http://www.CodeBit.cn
//focusクラス:フォーカスを取得するときのスタイル
//normalClass:ノーマルなスタイル
Function focus Input
(focus Class、normalClass
)
{
var element=document.
getElements ByTagName
(
「input」
)0
for
(
var i=
0;i
)
{
if
(elements
[i]
)
type!=
「button」&elemens
[i]
)
type!=
「submit」&elemens
[i]
)
type!=
「リセット」
)
{
elements
[i]
)
onfocus=
機能
(
)
{
this.
クラスName=focusクラス;
｝
elements
[i]
)
onblur=
機能
(
)
{
this.
class Name=normalClass𞓜
';
｝
)
)
)
テストコード:HTML:
-
-
<style type="text/css">
-
.normalInput {
-
border:1px solid #ccc;
-
}
-
.focusInput {
-
border:1px solid #FFD42C;
-
}
-
</style>
-
-
<script type="text/javascript">
-
window.onload = function () {
-
focusInput('focusInput', 'normalInput');
-
}
-
</script>
-
-
：
<input type="text" class="normalInput" />
-