jQuery: як знайти перший видимий ввід / вибір / область тексту, крім кнопок?

87

я намагався

$(":input:not(input[type=button],input[type=submit],button):visible:first")

але воно нічого не знаходить.

У чому моя помилка?

UPD: Я виконую це на $ (document) .load ()

<script type="text/javascript">
$(window).load(function () {
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

і в налагодженні я бачу, що firstInput порожній.

UPD2: Я перебуваю на сторінці ASP.NET, що працює під Sharepoint.

Я виявив, що для деяких елементів він знаходить їх (для фіксованих), а для деяких ні. :(

jquery input jquery-selectors

— Артем
джерело

Спробувати "input" замість ": input"?

— Алек

Повинна працювати нормально. Ваша проблема лежить десь в іншому місці. Ви не виконуєте це до того, як $(document)є ready()?

— BalusC

У вас є певний html для пошуку?

— Шикі

Можливо, перший ввід - це type="hidden"? Клацніть правою кнопкою миші на сторінці та перегляньте джерело. Створений HTML також має значення. Без нього та належного SSCCE він знімає у темряві.

— BalusC

166

Чому б не просто орієнтуватися на тих, кого ви хочете ( демо )?

$('form').find('input[type=text],textarea,select').filter(':visible:first');

Редагувати

Або використовуйте jQuery : селектор введення для фільтрації нащадків форми.

$('form').find('*').filter(':input:visible:first');

— Мотті
джерело

5

Прапорець? Радіо? Пароль? Не кажучи вже про безліч нових типів введення HTML5.

— BalusC

9

@BalusC $ ('form'). Find (': input'). Filter (': visible: first')

— Abe Petrillo

1

Хоча це працює певною мірою, але ігнорує атрибут tabindex.

— eoleary

2

Невеликий, але корисний додаток: замість ': visible: first', ': visible: enabled: first' буде набагато кращим фільтром, оскільки верхній елемент може бути відключений в деяких випадках, і фокус не може переміститися туди.

— Prahlad Yeri

1

@PrahladYeri Можливо, також виключає лише читання':input:visible:enabled:not([readonly]):first'

— JustinStolle

13

Код JQuery чудовий. Ви повинні виконати в обробнику готових, а не у випадку завантаження вікна.

<script type="text/javascript">
$(function(){
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

Оновлення

Я спробував на прикладі Karim79 (дякую за приклад), і він чудово працює: http://jsfiddle.net/2sMfU/

— PeterFromCologne
джерело

3

Дякую @BalusC. Я зараз піду стріляти. Я ненавиджу себе. Я міг витратити останню годину, не возившись з робочим кодом. Я міг нагодувати своїх собак, почистити кухню. Є багато речей, яких я міг досягти. Зараз у мене є лише біль. До побачення, назавжди .... І так, я повинен був слухати.

— karim79

@karim: rofl. Ласкаво просимо :) До речі: Я вже купав своїх дітей, приносив їх у ліжко, годував собак і котів і брав собі кока-колу;)

— BalusC

7

Це мій короткий виклад вище та ідеально підходить для мене. Дякую за інформацію!

<script language='javascript' type='text/javascript'>
    $(document).ready(function () {
        var firstInput = $('form').find('input[type=text],input[type=password],input[type=radio],input[type=checkbox],textarea,select').filter(':visible:first');
        if (firstInput != null) {
            firstInput.focus();
        }
    });
</script>

— Бен Фостер
джерело

3

Це покращення щодо відповіді @ Mottie, оскільки станом на jQuery 1.5.2 :textвибираються inputелементи, які не мають вказаного typeатрибута (у цьому випадку type="text"мається на увазі):

$('form').find(':text,textarea,select').filter(':visible:first')

— Майк Слінн
джерело

1

Ось моє рішення. Код повинен бути досить простим для наслідування, але ось ідея:

отримати всі вхідні дані, виділення та текстові області
відфільтрувати всі кнопки та приховані поля
фільтр лише для увімкнених, видимих полів
виберіть перший
сфокусуйте вибране поле

Кодекс:

function focusFirst(parent) {
    $(parent).find('input, textarea, select')
        .not('input[type=hidden],input[type=button],input[type=submit],input[type=reset],input[type=image],button')
        .filter(':enabled:visible:first')
        .focus();
}

Тоді просто зателефонуйте focusFirst з вашим батьківським елементом або селектором.

Селектор:

focusFirst('form#aspnetForm');

Елемент:

var el = $('form#aspnetForm');
focusFirst(el);

— Дж. Адам Роджерс
джерело

0

Ви можете спробувати нижче код ...

$(document).ready(function(){
    $('form').find('input[type=text],textarea,select').filter(':visible:first').focus();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
    
<input type="submit" />
</form>

Розгорніть фрагмент

— Махбуб
джерело