【HTML】<input>

这篇具有很好参考价值的文章主要介绍了【HTML】<input>。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

分类

text

password

number

button

reset

submit

hidden

radio

checkbox

file

image

color

range

tel

email(火狐有校验,360浏览器无校验。)

url

datetime(火狐、360浏览器不支持)

search

date、month、week、time、datetime-local

input[type=button]

按钮分类

<button>提交</button>
<input type="submit" value="提交">
<input type="reset" value="重置">

换行

<input type="button" value="不会换行">
<button type="button">会换行,最大换行是240px</button>

input[type=file] 上传

accept属性

【HTML】<input>,HTMLCSS,javascript

accept=“image/png, image/jpeg”

accept=".png, .jpg, .jpeg" 

accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" 

multiple属性

【HTML】<input>,HTMLCSS,javascript

手动上传文件

上传前:

【HTML】<input>,HTMLCSS,javascript

 上传后:

 【HTML】<input>,HTMLCSS,javascript

第一步:页面效果

<el-form-item label="上传文件" >
  <div class="upload-demo">

    <!-- 原生控件 -->
    <input id="file" ref="file" type="file" name="file" @change="fileChange"  accept=".xlsx,.xls" />

    <!-- 上传成功后显示图片 -->
    <div class="upload-box" v-if="form.name">
      <div class="file">
        <img class="file-img" src="../../../assets/images/type.png">
        <p class="file-name">{{form.name}}</p>
      </div>
      <div class="reload">重新上传</div>
    </div>

    <!-- 上传控件 -->
    <div class="upload-box" v-else>
      <img class="file-src" src="../../../assets/images/upload.png">
      <div class="el-upload__text">点击文件或拖到此处上传</div>
    </div>
  </div>

  <!-- 提示文字 -->
  <div class="el-upload__tip">目前支持 xlsx,xls格式文件</div>
</el-form-item>

<el-form-item>
  <el-button type="primary" size="mini" @click="submit()" :disabled="form.name == ''">导入</el-button>
  <el-button size="mini" @click="cancel()">取消</el-button>
</el-form-item>
data() {
  return {
    form: {
      file:'',
      name:'',
    },
  };
},

// 选择文件
fileChange(e) {
  this.form.file = e.target.files[0];
  this.form.name = this.form.file.name
},

// 上传文件
submit() {

  // 文件
  const fd = new FormData();
  fd.set("file", this.form.file);
  
  // 调取接口
  uploadFile(fd).then(res => {
    if(res.code == 200) {
      this.info = res.data
    }else {
      this.success = false
    }
  });
}

// 取消上传
cancel() {
  this.$refs.file.value ='' // 清空上传文件中遗留文件
  this.form.file = {};
  this.form.name = ''
}
export function uploadFile(data) {
  return request({
    url: '/uploadFile',
    method: 'post',
    headers: { "Content-Type": "multipart/form-data" },
    data: data,
  })
}
.upload-demo {
  width: 360px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input#file {
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}
.upload-box {
  height: 100%;
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 20px;
  position: absolute;
  top: 0;
  left: 0;
}
.file {
  display: flex;
  align-items: center;
}
.file-img {
  height: 20px;
  width: 20px;
  margin: 0 3px 0 0;
}

.file-name {
  margin-right: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 250px;
}
.file-name-all {
  margin-right: 30px;
}

.file-down {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgba(19,124,239,1);
}

.reload {
  margin-top: 20px;
  color: rgba(19,124,239,1);
  cursor: pointer;
}
.file-src {
  height: 30px;
  width: 30px;
}

.el-upload__text {
  margin-top: 20px;
}

.el-upload__tip {
  margin: 0;
}

::v-deep .el-upload--picture-card {
  margin:0 20px 20px 0;
}

::v-deep .el-upload-dragger {
  height: 100%;
  width: 100%;
}

取消上传或关闭弹窗再打开后,上传相同图片无法成功

this.$refs.file.value ='' // 清空上传文件中遗留文件

选择后得到base64码,可以预览图片

// 选择文件
fileChange(e) {
  this.form.file = e.target.files[0];
  this.form.name = this.form.file.name

  // 展示成图片Base64 格式
  var reader = new FileReader()
  reader.readAsDataURL(this.form.file)
  reader.onload = function (result) {
      console.log(result)
      this.img = result.target.result 
   }
},

【HTML】<input>,HTMLCSS,javascript

 在页面中预览

 <img :src=" 'data:image/png;base64,' + this.img">

但是因为现在上传的是excel所以无法预览。

浏览器兼容

IE10去除自带的清除按钮

input::-ms-clear {
    height: 0;
    width: 0;
}

chrome输入框背景色黄色

input:-webkit-autofill导致的问题文章来源地址https://www.toymoban.com/news/detail-640939.html

<input type="text" autocomplete="off">
input {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

输入框怪异内阴影

input,textarea,button {
    -webkit-appearance: none;
    border-radius:0;
    border:none;
}

到了这里,关于【HTML】<input>的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html中input属性设置(合集)

      html中input标签是常见的一个标签,下面由学习啦小编为大家整理了html中的input属性设置的相关知识,希望对大家有帮助! html中input属性设置 总结 1、value 属性 value 属性规定输入字段的初始值: 实例 form action=\\\"\\\" First name:br input type=\\\"text\\\" name=\\\"firstname\\\" value=\\\"John\\\" br Last name:br inpu

    2024年02月12日
    浏览(39)
  • html input 设置不允许修改

    要设置一个 HTML input 元素不允许修改,您可以添加 readonly 属性或将 disabled 属性设置为 true 。这将禁用元素的编辑功能。 下面是几个示例: 使用 readonly 属性: 在上面的示例中, readonly 属性被添加到 input 元素中,使其只读。用户无法直接编辑该 input 元素。 使用 disabled 属性

    2024年02月13日
    浏览(46)
  • html:去除input/textarea标签的拼写检查

    默认情况下, textarea 会启动拼写和语法检查,表现效果就是单词拼写错误会出现红色下划线提示 效果 有时,我们并不需要拼写检查,可以通过配置属性 spellcheck=\\\"false\\\" 去除拼写和语法检查 效果 参考 Input标签自动校验功能去除实现 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Eleme

    2024年02月14日
    浏览(68)
  • 前端实现 input 回车搜索(html,vue,react实现)

    搜索框是个常见的功能,除了 用ui库,有的时候必须要自己封装(因为改ui库太麻烦了,定制化要求很高),所以 涉及到 点击按钮搜索和回车搜索都要实现。下面就是实现的一些方法。 html里: 方式一:html里可以用 form 来实现,因为form里回车也能触发提交事件。思路就是

    2024年02月11日
    浏览(45)
  • html的表单标签(上):form标签和input标签

    表单是让用户输入信息的重要途径。 用表单标签来完成与服务器的一次交互,比如你登录QQ账号时的场景。 表单分成两个部分: 表单域:包含表单元素的区域,用 form 标签来表示。 表单控件:输入框,提交按钮等,用 input 标签来表示。 描述了要把数据按照什么方式,提交

    2024年02月20日
    浏览(38)
  • html中如何给input输入框这个一个默认值

    在HTML中,要给 input 输入框设置一个默认值,你可以使用 value 属性。下面是一个简单的例子,展示了如何为一个文本输入框设置一个默认值: 在这个例子中, input 元素的 type 属性设置为 text ,表示这是一个文本输入框。 value 属性被设置为 这是默认值 ,这意味着当页面加载

    2024年02月21日
    浏览(41)
  • Android WebView 获取html页面聚焦input在页面的位置

    Android WebView 获取html页面聚焦input在页面的位置,实现代码如下: 注意: WebView 要设置setJavaScriptEnabled支持JavaScript调用 返回的数值是以dp为单位,使用时需要转换为像素px

    2024年02月15日
    浏览(49)
  • HTML input type="number" 隐藏默认的步进箭头

    number 类型的 input 元素用于让用户输入一个数字,其包括内置验证以拒绝非数字输入。 浏览器可能会选择提供步进箭头,让用户可以使用鼠标增加和减少输入的值,或者只需用指尖敲击即可。但有些场景需要隐藏默认的步进箭头。 要隐藏 HTML input 元素的默认步进箭头,可以使

    2023年04月21日
    浏览(40)
  • html form中的input有哪些类型?各是做什么处理使用的

    在HTML表单中,input元素有多种类型,主要包括以下几种: button:用于定义可点击的按钮。 checkbox:用于定义复选框,用户可以选择多个选项。 file:用于定义文件输入字段,用户可以从本地选择文件上传到服务器。 hidden:用于定义隐藏的输入字段,用户无法直接看到,但可以

    2024年01月24日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包