жерех: TextBox;есть ли «OnFocus» или CSS-эквивалент - PullRequest
Новая
       41

жерех: TextBox;есть ли «OnFocus» или CSS-эквивалент

1 голос
/ 02 февраля 2011

Что я хотел бы сделать по сути: 

/*psuedo css code*/
input:textbox:active
{
    border: 1px solid blue;
}

Вроде как есть a:active, но сделайте это для текстового поля.Я знаю, что могу использовать для этого Javascript, но по причинам поддержки, поскольку я не знаю, кто здесь знает JavaScript, я стараюсь не допускать этого.Спасибо.

Я бы тоже хотел, чтобы неактивный забрал границу.Спасибо.

Ответы [ 3 ]

2 голосов
/ 02 февраля 2011

Скажите, что ваше текстовое поле имеет идентификатор TextBox, вы можете использовать #TextBox:focus { border: 1px solid blue; }

0 голосов
/ 02 февраля 2011

У вас уже есть ответ на общий случай в наполовину приличных браузерах, на случай, если кто-то захочет заставить его работать и в более старых версиях IE, тогда вот хак, который я подготовил ранее. Он основан на коде выпадающего меню SuckerFish , основанием которого является то, что любые стили, которые у вас есть для :hover, вы повторяете для класса .sfhover, например: 

textarea:hover, input[type=text]:hover, input[type=password]:hover, textarea.sfhover, input.sfhover {
    border: 1px solid blue;
}

Затем у вас есть функция, которая присоединяет обработчики событий к элементам INPUT и TEXTAREA для событий focus и blur: 

function highlightInputs () {
    var sfEls = document.getElementsByTagName("INPUT");
    for (var i=0; i<sfEls.length; i++) {
        if (sfEls[i].type == 'text' | sfEls[i].type == 'password') {
            sfEls[i].onfocus=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onblur=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    sfEls = document.getElementsByTagName("TEXTAREA");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onfocus=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onblur=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}

Код должен выполняться только в IE, поэтому вам не нужно беспокоиться о кросс-браузерной совместимости. Затем используйте какой-то метод определения IE для запуска функции при загрузке страницы только в IE: 

if (window.attachEvent) window.attachEvent("onload", highlightInputs);

Вы также можете использовать условные комментарии или что-то вроде $.browser.msie теста jQuery, если эта библиотека уже загружена.

0 голосов
/ 02 февраля 2011

Вы можете выделить рамку с помощью CSS, но она не будет фокусироваться на рамке.Для этого вам нужно использовать JavaScript, независимо от того, выставляете ли вы его разработчикам или нет.Вы можете скрыть тот факт, что есть JavaScript, используя методы здесь .

...