Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2012, 09:41
Интересующийся
Отправить личное сообщение для Marv Посмотреть профиль Найти все сообщения от Marv
 
Регистрация: 09.08.2010
Сообщений: 19

Выделение содержимого в input
В форме несколько input с заданным текстом по-умолчанию:
<input type="text" name="tel_1" value="+7" />
<input type="text" name="tel_2" value="+7" />
<input type="text" name="tel_3" value="+7" />

Так вот при переключении между ними по клавише tab их содержимое ("+7") автоматически выделяется. Как отменить это выделение? Пробовал по событию focus вернуть false, но выделение срабатывает уже после focus.
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2012, 10:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Ну на jQuery можно так (В Хроме не пашет

<style type="text/css">
span.Wrap{
 display:inline-block;
}
input.Clone{
 background-color:#DEF0F2;/**/
 position:absolute;
 z-index:2;
}
</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function Noselect(a) {
$(a).clone().addClass('Clone').prependTo($(a).parent());
}
function ReturnVal(a) {
$(a).parent().find('input.Clone').remove();
}
$('input.Clone').mousedown(function(){
      $(this).remove();
})
</script>

<span class=Wrap>
<input type="text" name="tel_1" value="+7" data="" onselect="Noselect(this)" onblur='ReturnVal(this)'/>
</span>
<span class=Wrap>
<input type="text" name="tel_2" value="+7" data="" onselect="Noselect(this)" onblur='ReturnVal(this)'/>
</span>
<span class=Wrap>
<input type="text" name="tel_3" value="+7" data="" onselect="Noselect(this)" onblur='ReturnVal(this)'/>
</span>

Последний раз редактировалось Deff, 19.07.2012 в 21:37.
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2012, 19:42
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Как убрать не знаю, но можно сделать чего-нибудь типа этого, чтобы +7 никуда не терялось при первом вводе.
<input type="text" name="tel_1" value="+7" 
  onkeyup="
    if (this.value.length == 0 || this.value.length == 1) this.value = '+7'
">

А чаще +7 ставят перед input-ом, чтобы его вообще не вводили.

Последний раз редактировалось bes, 19.07.2012 в 19:48.
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2012, 20:05
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

bes,
Ну при таб и получении фокуса - заслонить элементом с тем же контентом, что и в value(я загородил дублем input, убираемого при снятии фокуса , нажатия мыши(нун и нажатие клавиши добавить - забыл
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2012, 20:15
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Deff, при проходе в обратном направлении (Shift + Tab) приходится 2 раза нажимать данную комбинацию для перехода на предыдущий элемент, т.е. как я понимаю поверх наложенные клоны не удаляются?
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2012, 21:10
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Для такого не сильно принципиального момента можно наверное вообще ничего не городить, либо вынести +7 за input, либо сделать разбивку частей номера по input-aм (хотя может быть и есть реальный способ как воздействовать на это выделение)
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2012, 21:16
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от lord2kim
т.е. как я понимаю поверх наложенные клоны не удаляются?
Да вродь удаляются (Ток не тестил в обратку, удаляются по любому при потере фокуса)

Ну понятно - при обратном табе фокус переходит на клона... (а на клоне событие не обрабатываю, хотя странно - все одно исходник должен фокус потерять - должно удаляться - тут походу баг - таб как бы фиксируется координатно - вроде как фокус якобы остался и на старом и на новом - Ксать интересный трабл - мон использовать

Последний раз редактировалось Deff, 20.07.2012 в 00:00.
Ответить с цитированием
  #8 (permalink)  
Старый 19.07.2012, 23:58
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

По идее можно управлять положением каретки, но FF и хроме это не прокатывает при получении фокуса по нажатию tab (правда в FF работает корректно, если активировать мышью, а вот в хроме ни так ни этак).
<input id="inp" name="tel_1" value="+7">
<script>
window.onload = function () {
  var inp = document.getElementById('inp');
  inp.onfocus = function () {
    if (inp.createTextRange) {
      var r = inp.createTextRange();
      r.collapse(false);
      r.select();
    } else if (inp.setSelectionRange) {
      var len = inp.value.length;
      inp.setSelectionRange(len, len); 
      //inp.focus();
   }
 }
}
</script>
Ответить с цитированием
  #9 (permalink)  
Старый 20.07.2012, 14:18
Интересующийся
Отправить личное сообщение для Marv Посмотреть профиль Найти все сообщения от Marv
 
Регистрация: 09.08.2010
Сообщений: 19

За недостатком времени, действительно, пришлось вынести +7 за input. Просто думал, что можно какими-нибудь стандартными средствами отменить выделение (вернуть тот же false, например). В любом случае спасибо за советы.

Последний раз редактировалось Marv, 20.07.2012 в 14:21.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 12:03
Изменение множества элементов Input по определённом призна Лавсановые Волокна Элементы интерфейса 1 24.12.2010 10:37
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 19:10
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55