jQuery: 如何找到用户名输入字段？

Question

我试过了

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'); 我已经能够找到密码输入了。但我需要找到一种方法来找到用户名输入字段（第一个在密码之前可见）

有没有办法获取用户名输入和密码输入？

Answer 1

您可以尝试类似的方法，但不能保证一定有效。

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">

Answer 2

方式 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. 复杂算法：检查包含词的占位符、标签和输入值："username"（不区分大小写）。如果没有这样的输入，则执行方法 1。

棘手的部分还在于获取输入的标签。该算法检查标签是否通过 "for" 等于输入的 id 的属性绑定到输入，或者它只是在输入元素之前。

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;
}

jQuery: 如何找到用户名输入字段？

jQuery: how to find username input field?

passwords

jquery

input