Фокус для дива
Какими способами можно для <div> сделать фокус onfocus
|
а разве для div можно применить Onfocus?:-?.Может вам подойдет вариант сделать тег div через <a> отменив переход по ссылке
|
Цитата:
Но в учебнике сказано что какие то способы есть http://learn.javascript.ru/focus-blur |
GrizzlyBear,
Идея bot87, вполне работоспособна <a id="Adiv" style="display:block">Тут что то</a> |
Это понятно что работоспособна
но меня интересуют способы решения с дивом пара примеров просто интересно |
GrizzlyBear,
Тогда поясняйте в чем "фокус" Для чего он необходим и что есть желания добиться данным событием ? Можно div обернуть в <a оно полностью прилегает по контуру - короче - поясняйте |
Конкретно пока что ничего нету.
Есть желание узнать каким образом фокус применяется к див можете свои примеры выкладывать |
GrizzlyBear,
Чуть подумав, скорее всего нун <а вставить внутрь div и растянуть по стенкам... Но без конкретной задачи - выкладывать новые варианты, как не Aйс - Эт в курилки типо: - как измерить периметр зубов у медведя |
Хорошо конкретная задача.
Например как с формами, при нажатии текст в форме пропадает делается это с помощью фокуса. также с дивом к примеру в нем текст. при нажатии на див текст пропадает, а если нажать в другое место то текст возвращается. |
ну так загоните текущий текст в переменную при нажатии и сделайте innerhtml на пустую строку, ну и т.д.
|
GrizzlyBear,
А чем плох - onclick для приведенной задачи ? Собственно нун плясать от отличий фокуса и клика: - фокус вставляет каретку курсора в элемент |
Я просто как пример привел
Понятно что решений этой задачи много и без фокуса но я то хочу конкретно с фокусом увидить |
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<div id=a style="border:blue 1px solid;">также с дивом к примеру в нем текст. при нажатии на див текст пропадает</div>
<br/>
<div id=b style="border:red 1px solid;"> а если нажать в другое место то текст возвращается.</div>
<script type="text/javascript">
$("#a,#b").click(function(){
if($(this).attr('id')=='a'){$("#a").hide();
} else $("#a").show();
});
</script>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<div id=a style="border:blue 1px solid;height:23px;">также с дивом к примеру в нем текст. при нажатии на див текст пропадает</div>
<br/>
<div id=b style="border:red 1px solid;height:23px;"> а если нажать в другое место то текст возвращается.</div>
<script type="text/javascript">
$("#a,#b").click(function(){
if($(this).attr('id')=='a'){ $("#a").attr("alt", $("#a").text() ); $("#a").text('')
} else $("#a").text( $("#a").attr("alt") );
});
</script>
|
Лень читать все, просто напишу: в HTML5
<a> относится к flow content, поэтому можно спокойно завернуть блок в ссылку. |
onfocus тот же самый onclick! И работать на див они будут одинаково!!!
|
Все можно :lol: :lol:
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<style>
</style>
<body>
<div style='width:100%;height:100%' id='div2' onclick='O(-2,"l")'></div>
<div id='div' style='position:absolute;top:0px;left:0px;width:300px;height:200px;background-color:f00;' onclick='O(2)' onmouseout='O(-1,false)' onmouseover='O(1,true)'>
<b id='b'>Блаблаблаблаблабла текст</b>
</div>
<script type='text/javascript'>
document.k = 0;
document.t = false;
document.l;
var div = document.getElementById('div');
var b = document.getElementById('b');
document.inka = b.innerHTML;
function O(arg,arg2){
if(arg2 == 'l'){
if(document.k != 2){
document.k += 2;
}
}
document.k += arg;
if(document.k > 3) document.k = 3;
if(document.k < -3) document.k = -3;
if((arg2 != null) && (arg2 != undefined)) document.t = arg2;
if(document.t == true){div.setAttribute('onmouseout','O(-1,false)');div.setAttribute('onmouseover','')}
else{div.setAttribute('onmouseover','O(1,true)');div.setAttribute('onmouseout','')}
if(document.k > 0){
document.getElementById('b').style.opacity = 0;
document.getElementById('div').style.border = 'solid blue 3px';
}
else{
document.getElementById('b').style.opacity = 1;
document.getElementById('div').style.border = 'solid red 3px';
}
}
</script>
</body>
</html>
нажатие на див будто вызывает фокус и он остается (как у формы), ну и при наводке тоже фокус образуется и исчезает при отводе =)=)P.S. в коде ошибка скоро найду её. P.P.S ошибка исправлена. |
<style>
#a,#b{
margin:3px 0;
padding: 2px 12px;
width:530px;
float:left;
}
</style>
<span>
<div id=a style="border:blue 1px solid;" onclick="this.style.color='transparent'" >Кликаем - Текст исчезнет</div>
<br/>
<div id=b style="border:red 1px solid;" onclick="this.parentNode.childNodes[1].style.color=''"> Кликаем тут, в Первом окне - появится</div>
</span>
|
все я ошибку исправил в своем примере
|
Dim@,
Можно существенно сократить:yes: скрытие через onmouseout легко реализовать через css |
Deff,
да пофиг не так уж много и памяти жрет мой пример :) , зато у меня как с реальным фокусом ;) |
Deff,
я не так хорошо знаю css прямо так не изучал |
Цитата:
Задача-то какая? |
Вы как дети все
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
div:focus {
border: 1px solid #f00;
content: "На мне фокус";
}
</style>
<div contenteditable="true" onfocus="this.removeAttribute('contenteditable');" onblur="this.setAttribute('contenteditable', true);"></div>
в опере и так работает:
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
div:focus {
border: 1px solid #f00;
content: "На мне фокус";
}
</style>
<div disabled="disabled" contenteditable="true"></div>
|
devote :cray: Опередил - изумительно! ++ ( Имхо следущая серия - челу как в input type='text' писать захочется
|
Цитата:
|
Deff,
да в хроме я заметил он курсор ставит для редактирования.. поэтому я поправил пример выше. |
Восхищаюсь! - сижу -балдю!
|
мда, чето ИЕ не воспринимает ничего совсем.. даже с тегом A
|
лень читать ,что мешает при клике вешать своё событие и отрабатывать его. другой вопрос нахрена?
-если клик на dive и он раедактируемый-отработать событие пользовательское фокус. если клик не на диве посмотреть был ли он в пользовательском фокусе-отработать потерю фокуса если необходимо.(чем текст эрия не устраивает? тем более вместе с css3 -это бомба) а вообще это дрочь и идёт не понимания и не знания HTML. туть джиквери юи никто не отменял |
Цитата:
Цитата:
|
Цитата:
есть спецификации. их -читать!! |
Цитата:
|
Да лано Вам - Ну интересно жа - Ну кто нидь крутил кубик-рубика ?
Так вот выкинуть и забыть! Читать Мат статистику и Теорию Перестановок! |
Цитата:
|
devote,
дак я не тебе, а т.с( у). Вроде бы прямо написал,что нех от незнания головоломки другим загадывать. Один дурак,может задать столько вопросов ,что сотня мудрецов не сможет ответить. В.И. Ульянов-Ленин |
Цитата:
|
| Часовой пояс GMT +3, время: 04:02. |