在有些表单的设计中，有需求是不需要让浏览器自动填充，一半来说只要给input等输入框加上 autocomplete="off" 就可以了，但是有些浏览器并不遵守这个规则，还是会弹出自动填充的功能。 研究下来，有个办法，可以给input输入框增加readonly只读属性，但是问题来说，增加了readonly后，就无法输入内容了，所以可以这样做，监听focus和blur 根据焦点情况来控制readonly属性，代码如下： <input type="text" name="email" autocomplete="…
Hmtl中有个如下的文件上传input控件，绑定了@change事件，在用户选择了文件后触发，来执行特定的业务逻辑 <input id="uploads" type="file" onchange="fileChanged(this)" accept="image/*"> <!--或者vue下的@change--> <input id="uploads" type="file" @change="fileChanged" accept="image/*"> 发现一个问题，在用户选…
使用flex布局，在每一行上，需要固定X个元素，超过的元素做换行处理。 假设如下Html代码： <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div…
要在网页上显示类似O2(氧气)、m2(立方米)这样带上下标的。 先上示例代码，再解释： O<span style="vertical-align: sub;">2</span> m<span style="vertical-align: super;">2</span> 在css中，可以使用vertical-align 属性的sub、super或者text-top、text-bottom属性值来显示文字的上标和下标。下面我们就来介绍一下css vertical-ali…
在用Html/CSS做一些流程图，需要用到上下的箭头，如图所示： 以下是我用Html/CSS的实现方式，箭头使用的是svg（path）画出来的，箭头的颜色目前是黑色，使用：fill="#000000"，包括箭头高度、宽度，颜色等等，可能根据实际情况调整。 HTML代码如下： <html> <style> .my-arrow-wrap { position: relative; height: 40px; border-left: 1px solid #000; margin: 10vh 50…
如题的需求：使用input 标签type=file来选择图片文件并显示在div/image标签中的实现。不过文件选择组件不能自定义我要的按钮，我使用了样式给input隐藏起来，然后自己再使用div画了一个按钮（选择照片） html代码如下: <div style="width:96px;height: 128px;border: #A2A2A2 1px solid;text-align: center;background: #FAFAFA;"> <img :src="portraitData" …
需要在网页浏览器中调用连接摄像头/音频，并显示在浏览器中 Javascript代码如下： this.getUserMediaToPhoto({ video: { width: 480, height: 320 }, audio: true }, function(stream) { var video = document.getElementById('video'); video.srcObject = stream; }, function(error) { console.log(error); }); /…
DIV或者其他标签内的多行文本文字，默认情况下的很多时候，可能对齐方式排版的对齐方式不对，不是很好看（右侧不对齐），如图： 为了让网页美观，希望让文本两段对齐，可以使用来进行对齐 示例的代码如下： .my-div { word-wrap: anywhere; text-align:justify; } 修改后如图就两端对齐了，好看多了：
Html中input输入框，如果设置属性type="number"可以限制用户仅能输入数字（不过限制不能完全自定义，有自定义需求的，请查看：https://blog.terrynow.com/2022/04/20/vuejs-iview-input-allow-digits-or-specified-chars/），但是加上这个属性后，发现输入框右侧有个上下的箭头，可以给输入的数字+1后者-1，但是因为一些特定的要求，产品要求我们去掉或者隐藏这个上下箭头，如图： 可以利用css实现，Html代码如下： <in…
需要在网页浏览器中实现调用手机的拨打电话功能（点了链接或者功能按钮后，会弹出手机系统的拨打电话确认提示框，然后就可以直接拨打电话了） 使用Javascript来调用拨打电话： window.open("tel:13912345678", '_self'); 如果是使用网页中的链接来拨打电话，可以使用a链接： <a href="tel:13912345678">点击拨打电话13912345678</a>
