Question

我正在创建一个浮动标签，我设法在文本框中制作了一个浮动标签，但是在我的下拉菜单中不起作用。希望你能帮助我。

/** GLOBAL OBJECT **/
var $ = {
  addClass: function(elem, name) {
    var classes = elem.className.split(' '),
      cIndex = classes.indexOf(name);
    if (cIndex === -1) {
      classes.push(name);
    }
    elem.className = classes.join(' ');
    return this;
  }, // END addClass

  removeClass: function(elem, name) {
    var classes = elem.className.split(' '),
      cIndex = undefined;

    function recursive() {
      // use a recursive function to remove all instances
      // of the class name
      cIndex = classes.indexOf(name);
      if (cIndex >= 0) {
        classes.splice(cIndex, 1);
        recursive();
      }
    }
    recursive();
    elem.className = classes.join(' ');
    return this;
  }, // END removeClass

  hasClass: function(elem, name) {
    var classes = elem.className.split(' '),
      cIndex = classes.indexOf(name);
    if (cIndex >= 0) {
      return true;
    } else {
      return false;
    }
  }, // END hasClass

  selectCreate: function(select, label) {

    var _this = this;
    id = '_' + select.id,
      input = document.createElement('input'),
      div = document.createElement('div'),
      ul = document.createElement('ul'),
      val = {
        value: select.value,
        text: select.options[select.selectedIndex].text
      };

    select.style.display = 'none';

    ul.id = 'ul' + id;
    ul.className = 'ddown-list';
    ul.setAttribute('aria-live', 'polite');

    input.setAttribute('type', 'text');
    input.setAttribute('aria-autocomplete', 'list');
    input.setAttribute('aria-haspopup', 'true');
    input.setAttribute('aria-owns', ul.id);
    input.className = 'dynamic-dropdown';
    input.id = id;

    if (select.getAttribute('data-required') === 'true') {
      input.setAttribute('required', 'true');
    }

    label.setAttribute('for', id);

    div.className = 'selectRegion';

    div.appendChild(label);
    div.appendChild(input);
    div.appendChild(ul);

    select.parentNode.insertBefore(div, select);

    input.value = val.text;

    if (input.value !== '') {
      this.addClass(label, 'active');
    } else {
      this.addClass(label, 'inactive');
    }

    input.addEventListener('focus', function() {
      _this.addClass(label, 'active')
        .addClass(label, 'transition')
        .removeClass(label, 'inactive');
      if (this.setSelectionRange) {
        this.setSelectionRange(0, this.value.length);
      }
      populateList(this, select, document.getElementById('ul' + this.id), -1, true);
    }); // END focus
    input.addEventListener('blur', function() {
      var input = this;
      setTimeout(function() {
        if (input.value === '') {
          _this.addClass(label, 'inactive')
            .addClass(label, 'transition')
            .removeClass(label, 'active');
        } else {
          var list = getList(input.value, select, false);
          select.value = list.value[0];
          input.value = list.text[0];
        }
        document.getElementById('ul' + input.id).innerHTML = '';
      }, 250);
    }); // END blur
    input.addEventListener('keyup', function(e) {
      var list = document.getElementById('ul' + this.id).getElementsByTagName('li'),
        index = -1,
        kC = e.keyCode;
      for (var i = 0, x = list.length; i < x; i++) {
        if (_this.hasClass(list[i], 'active')) {
          index = i;
          break;
        }
      }
      if (kC !== 9 && kC !== 16) { // SHIFT && TAB	
        if (kC === 13) { // ENTER
          var list = getList(this.value, select, false);
          select.value = list.value[index];
          this.value = list.text[index];
          document.getElementById('ul' + this.id).innerHTML = '';
        } else {
          switch (kC) {
            case 38: // ARROW UP
              index--;
              if (index < 0) {
                index = 0;
              }
              break;
            case 40: // ARROW DOWN
              index++;
              if (index >= list.length) {
                index = list.length - 1;
              }
              break;
            default:
              index = -1;
              break;
          }
          populateList(this, select, document.getElementById('ul' + this.id), index, false);
        }
      }
    }); // END keyup

    function populateList(input, select, target, index, focus) {
      var list = getList(input.value, select, focus),
        counter = 0,
        output;
      if (focus) {
        index = select.selectedIndex - 1;
      }
      target.innerHTML = '';
      for (var i = 0, x = list.value.length; i < x; i++) {
        output = document.createElement('li');
        if (counter === index) {
          output.className = 'active';
        }
        output.appendChild(document.createTextNode(list.text[i]));
        output.addEventListener('click', function() {
          console.log('test');
          input.value = this.innerHTML;
        });
        target.appendChild(output);
        counter++;
      }
      if (index >= 0) {
        var lis = target.getElementsByTagName('li'),
          sTop = 0;
        for (var i = 0, x = lis.length; i < x; i++) {
          if (i >= index) {
            break;
          }
          sTop += lis[i].clientHeight;
        }
        target.scrollTop = sTop;
      }

    } // END populateList

    function getList(val, list, focus) {
      var value = [],
        text = [],
        vLength = val.length;
      if (focus) {
        vLength = 0;
        val = '';
      }
      for (var i = 0, x = list.length; i < x; i++) {
        if (list[i].text !== '' &&
          (list[i].text.toUpperCase().substring(0, vLength) === val.toUpperCase() ||
            list[i].value.toUpperCase().substring(0, vLength) === val.toUpperCase())) {
          value.push(list[i].value);
          text.push(list[i].text);
        }
      }
      return {
        value: value,
        text: text
      };
    } // END function getList

  }, // END selectCreate()

}; // END $

window.onload = function() {
  var labels = document.getElementsByTagName('label'),
    id = '',
    label = undefined,
    input = undefined,
    type = undefined;

  for (var i = 0, x = labels.length; i < x; i++) {
    label = labels[i];
    id = label.getAttribute('for') || '';
    input = document.getElementById(id);
    if (input) {
      type = input.getAttribute('type') || input.tagName;
      type = type.toLowerCase();
      if (input && (type === 'select')) {
        $.selectCreate(input, label);
      } // END if( input && select )
    }
  } // END for( labels )


}();

var demo = function() {
  setTimeout(function() {
    document.getElementById('_s').focus();
    setTimeout(function() {
      document.getElementById('_s').blur();
    }, 750);
  }, 500);
}();

body {
  background-color: #F7F7F7;
  font-family: Arial;
  padding-top: 10%;
}

input,
label,
select {
  width: 280px;
  padding: 10px;
  font-size: 16px;
}

input {
  border: solid 1px #CCCCCC;
  border: none;
  overflow: visible;
  outline: none;
  background-color: transparent;
  border-bottom: solid 1px #999;
}

label {
  position: absolute;
}

label.active {
  color: #3784BB;
  margin-top: -20px;
  font-size: 12px;
}

label.inactive {
  color: #999999;
}

li.active {
  background-color: rgba( 255, 0, 0, 0.1);
}

.transition {
  transition: all linear 0.1s;
}

.input {
  width: 300px;
  margin: auto;
}

.input:first-child {
  margin-bottom: 5%
}

.selectRegion {
  width: 100%;
}

.selectRegion ul {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 300px;
  max-height: 200px;
  overflow: auto;
  box-shadow: 0 2px 3px rgba( 0, 0, 0, 0.1);
  background-color: #FFFFFF;
  z-index: 2;
}

.selectRegion ul li {
  padding: 10px;
}

.selectRegion ul li:hover {
  cursor: pointer;
}

.inputbox {
  position: relative;
  background: none;
  margin-right: 50px;
}

.inputbox input {
  width: 120%;
  padding: 10px 0;
  font-size: 19px;
  color: #21a1e;
  margin-bottom: 50px;
  overflow: visible;
  outline: none;
  background-color: transparent;
  border: none;
  border-bottom: solid 1px #999;
  margin-left: -10px;
  margin-top: -15px;
}

.inputbox label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #999;
  pointer-events: none;
  transition: top 0.7s ease, opacity 0.7s ease;
  border-radius: .25rem;
  margin-left: -10px;
  margin-top: -10px;
}

.inputbox input:focus+label,
.inputbox input:valid+label {
  top: -18px;
  left: 0;
  color: #4285f4;
  font-size: 12px;
  cursor: pointer;
}

<html>

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="col-sm-5">
    <button type="button" class="button2 " data-toggle="modal" data-target="#exampleModal1">Login</button>
  </div>




  <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg " role="document">
      <div class="modal-content">
        <div class="modal-header ">

          <h5 class="modal-title" id="exampleModalLabel" style="  color: #404E67;">Form</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">

          <form>


            <div class="form-row ">
              <div class="inputbox">
                <input type="text" required>
                <label>First Name </label>

              </div>

              <div class="inputbox">
                <input type="text" required>
                <label>Last Name</label>
              </div>
            </div>

            <div class="form-row">
              <div class="input">
                <label for="s">Sample 1:</label>
                <select id="s">
                  <option value=""></option>
                  <option value="1">Assignment</option>
                  <option value="2">Reading</option>


                </select>
              </div>
            </div>
            <div class="clear"></div>
            <div class="input">
              <label for="state">Sample 2</label>
              <select id="state">
                <option value=""></option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
              </select>
            </div>



          </form>

        </div>
      </div>

</body>

</html>

这是我当前的输出：

正如您在我的输出中看到的那样，这两个下拉菜单无法正常工作，如何使它像我的文本框一样成为浮动标签？

浮动标签下拉菜单不起作用

0 个答案: