Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выделение содержимого в input (https://javascript.ru/forum/dom-window/29962-vydelenie-soderzhimogo-v-input.html)

Marv 19.07.2012 09:41

Выделение содержимого в 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.

Deff 19.07.2012 10:33

Ну на 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>

bes 19.07.2012 19:42

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

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

Deff 19.07.2012 20:05

bes,
Ну при таб и получении фокуса - заслонить элементом с тем же контентом, что и в value(я загородил дублем input, убираемого при снятии фокуса , нажатия мыши(нун и нажатие клавиши добавить - забыл

lord2kim 19.07.2012 20:15

Deff, при проходе в обратном направлении (Shift + Tab) приходится 2 раза нажимать данную комбинацию для перехода на предыдущий элемент, т.е. как я понимаю поверх наложенные клоны не удаляются?

bes 19.07.2012 21:10

Для такого не сильно принципиального момента можно наверное вообще ничего не городить, либо вынести +7 за input, либо сделать разбивку частей номера по input-aм (хотя может быть и есть реальный способ как воздействовать на это выделение)

Deff 19.07.2012 21:16

Цитата:

Сообщение от lord2kim
т.е. как я понимаю поверх наложенные клоны не удаляются?

Да вродь удаляются (Ток не тестил в обратку, удаляются по любому при потере фокуса)

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

bes 19.07.2012 23:58

По идее можно управлять положением каретки, но 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>

Marv 20.07.2012 14:18

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


Часовой пояс GMT +3, время: 06:32.