html 材料设计文件输入

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 材料设计文件输入相关的知识，希望对你有一定的参考价值。

body {
  display: flex;
}

.file_input_div {
  margin: auto;
  width: 250px;
  height: 40px;
}

.file_input {
  float: left;
}

#file_input_text_div {
  width: 200px;
  margin-top: -8px;
  margin-left: 5px;
}

.none {
  display: none;
}
var fileInputTextDiv = document.getElementById('file_input_text_div');
var fileInput = document.getElementById('file_input_file');
var fileInputText = document.getElementById('file_input_text');
fileInput.addEventListener('change', changeInputText);
fileInput.addEventListener('change', changeState);

function changeInputText() {
  var str = fileInput.value;
  var i;
  if (str.lastIndexOf('\\')) {
    i = str.lastIndexOf('\\') + 1;
  } else if (str.lastIndexOf('/')) {
    i = str.lastIndexOf('/') + 1;
  }
  fileInputText.value = str.slice(i, str.length);
}

function changeState() {
  if (fileInputText.value.length != 0) {
    if (!fileInputTextDiv.classList.contains("is-focused")) {
      fileInputTextDiv.classList.add('is-focused');
    }
  } else {
    if (fileInputTextDiv.classList.contains("is-focused")) {
      fileInputTextDiv.classList.remove('is-focused');
    }
  }
}
Material Design File Input 
---------------------------


A [Pen](https://codepen.io/alexander-gaziev/pen/JdVQQm) by [Alexander Gaziev](http://codepen.io/alexander-gaziev) on [CodePen](http://codepen.io/).

[License](https://codepen.io/alexander-gaziev/pen/JdVQQm/license).
<html>

<head>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue_grey-red.min.css" />
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <title>Material Design File Input </title>
</head>

<body>
  <div class="file_input_div">
    <div class="file_input">
      <label class="image_input_button mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
        <i class="material-icons">file_upload</i>
        <input id="file_input_file" class="none" type="file" />
      </label>
    </div>
    <div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo">
      <input class="file_input_text mdl-textfield__input" type="text" disabled readonly id="file_input_text" />
      <label class="mdl-textfield__label" for="file_input_text"></label>
    </div>
  </div>
</body>

</html>

以上是关于html 材料设计文件输入的主要内容，如果未能解决你的问题，请参考以下文章

如何在角度材料中使用输入类型文件

如何解决 Firefox 的材料设计输入字段占位符屏幕阅读器问题？

材料设计选择下拉菜单

如何在 AngularJS 材料设计中创建简单的搜索输入文本？

如何在 vue 的故事书中显示材料设计图标

html 材料设计图标CDN