JQuery: как найти поле ввода имени пользователя? - PullRequest
Новая
       13

JQuery: как найти поле ввода имени пользователя?

0 голосов
/ 06 июня 2019

я пытался 

var input = $('input:password');
if(input.length>0){
    var form = input[0].closest("form");
    console.log($('#'+form.id).find('*').filter(':input:visible:first'));
  }

, но он не находит поле ввода пользователя

Я хотел бы написать расширение Chrome, которое предварительно заполняет имя пользователя и пароль в форме входа в систему.

с var input = $('input:password'); Я уже могу найти ввод пароля.но мне нужно найти способ найти поле ввода имени пользователя (1-е видно перед паролем)

Есть ли способ получить ввод имени пользователя и ввода пароля?

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

путь 1. Простой алгоритм: первое видимое поле ввода формы: Имя пользователя

fiddle: https://codepen.io/anon/pen/jooZQJ

var input = $('input:password');
console.log(input[0]);
if(input.length>0){
    var form = input[0].closest("form");
    console.log($(form).find('*').filter('input:visible:first')[0]);
  }

путь 2. сложный алгоритм: проверьте placeHolder, метку и значениеввод для включаемого слова: "имя пользователя" (без учета регистра).и если нет такого ввода, выполните способ 1.

хитрая часть также получить метку ввода.этот алгоритм проверяет, привязана ли метка к входу атрибутом «for», равным идентификатору ввода, или просто находится перед элементом ввода.

fiddle: https://codepen.io/anon/pen/RmmJwG

var input = $('input:password');
console.log(input[0]);
if(input.length>0){
    var form = input[0].closest("form");
    var canditates = $(form).find('input:visible');
    var found = null;
    for(var i =0; i<canditates.length; i++){
      var labelTag = getLabel(canditates[i]);
      if(($(canditates[i]).attr('placeholder')
          && $(canditates[i]).attr('placeholder').toLowerCase().indexOf('username') >= 0)
         || $(labelTag).text().toLowerCase().indexOf('username') >= 0
         || $(canditates[i]).val().toLowerCase().indexOf('username') >=0 ){        
        found = canditates[i];
        break;
      };
    }
    var username = found ? found : canditates[0];
    console.log(username);
  }
function getLabel(input){
  var label = $('label[for="' + $(input).attr('id') + '"]');
  if(label.length <= 0) {
    var parentElem = $(input).parent();
    if(parentElem.length == 0)return;
    var parentTagName = parentElem.get(0).tagName.toLowerCase();
    if(parentTagName == "label") {
        label = parentElem;
    }
  }
  if(label.length == 0){
    label = $(input).prev().filter('label');
    label = label.attr('for') ? undefined : label;
  }
  if(label && label.length > 0)return label[0];
  else return null;
}
0 голосов
/ 06 июня 2019

Вы можете попробовать что-то вроде этого, но нет гарантии, что это сработает. 

var password = $('input:password');
if (password.length > 0) {
  var inputs = $("input");
  var ind = inputs.index(password);
  var username = inputs.eq(ind - 1);
}

Демо 

var password = $('input:password');
if (password.length > 0) {
  var inputs = $("input");
  var ind = inputs.index(password);
  var username = inputs.eq(ind - 1);
  console.log(username)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><input type="text" /></div>
<input type="password">
...