前端placeholder(前端开发)
前端屏蔽中文输入法(input输入框type=“password“显示明文)
1、input输入框如果type=password能满足我们的需求,但是是密文,我们要明文显示,实现源码如下:
!DOCTYPE html
html lang="en"
head
? ? meta charset="UTF-8"
? ? meta name="viewport" content="width=device-width, initial-scale=1.0"
? ? title屏蔽输入法/title
/head
style
? body{
? ? background-color:rgb(220, 220, 255);
? }
? #password,#clear{
? ? position: absolute;
? }
? #password{
? ? opacity: 0;
? ? border: 0px;
? ? width: 1px;
? ? z-index: 999;
? }
? #clear{
? ? outline: none;
? ? color:rgb(214, 124, 6);
? ? width: 95%;
? ? background-color: rgba(255, 255, 255, 0.2);
? ? border: none;
? ? height: 40px;
? ? text-indent: 15px;
? ? border-radius: 5px;
? }
/style
body
? ? input type="password" id="password"/
? ? input type="text" placeholder="请扫描输入内容" id="clear" /
/body
script src=""/script
script
//聚焦clear
$('#clear').focus();
//监听clear输入框
$('#clear').bind('input propertychange', function()
{
? //聚焦password
? $('#password').focus();
? //将clear赋值给password
? $('#password').val($("#clear").val());
? //延迟200毫秒聚焦clear
? setTimeout(function(){
? ? ? ? ? ? $("#clear").focus();
? ? ? ? }, 200)
})
//监听password输入框
$('#password').bind('input propertychange', function()
{
? //将password赋值给clear
? $('#clear').val($("#password").val());
? //延迟200毫秒聚焦clear
? setTimeout(function(){
? ? ? ? ? ? $("#clear").focus();
? ? ? ? }, 200)
})
/script
/html
html中placeholder是什么意思?
比方说有一个输入框,placehold就是这个输入框的提示文字,当你什么也不输入的时候,可以在placeholder里面写上“请输入XXXXX”的一些提示语。
前端开发中经常遇到的一些英语单词
很多时候跟着书和不系统的视频学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划,学习过程中会遇到很多问题,你可以到我们的web学习交流君 点击此处 ,
同时准备了基础,进阶学习资料。学友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时讲一些项目实战案例。
在前端开发与探讨过程中熟悉并了解一些英语是非常关键的,下面整理了一些基础的前端英语单词,希望对给位有所帮助
首先、页面布局(layout)
header 头部/页眉;
index 首页/索引;
logo 标志;
nav/sub_nav 导航/子导航;
banner 横幅广告;
main/content 主体/内容;
container/con 容器;
wrapper/wrap 包裹(类似于container);
menu 菜单;
sub_menu/second_menu 子菜单/二级菜单;
list 列表;
section 分区/分块(类似于div);
article 文章;
aside 侧边栏/广告;
footer 页脚/底部;
title/sub_title 标题/副标题;
news 新闻;
hot 热点;
pro 产品(product);
company 公司;
msg/info 信息(message)/消息;
ads 广告(advertisements);
icon 小图标;
img 图片(image);
copyright 版权;
contact_us 联系我们;
friend_link 友情链接;
tel 联系电话(telephone);
address 地址;
其次、CSS样式(style)
CSS 层叠样式表 (Cascading Style Sheets) ;
background 背景;
position 位置/定位;
relative/absolute/fixed 相对定位/绝对定位/固定定位;
float 浮动;
clear 清除;
vertical-align: middle/top/bottom; 垂直居中/上/下;
line-height 行高;
margin 外边距;
padding 内边距;
border 边框;
solid/dashed/dotted 实线/线虚线/点虚线;
border-radius 圆角;
shadow 阴影;
display 展示;
hidden 隐藏;
block/inline-block 块元素/行内块;
overflow 溢出;
cursor 光标;
animation 动画;
css sprites 雪碧图/图片精灵;
column 分列;
flex 弹性(布局);
然后、表单(form)与表格(table)
form 表单;
action 行为;
method 方式/方法;
input 输入框;
label 标签;
password 密码;
radio 单选框;
checkbox 复选框;
btn 按钮(button);
submit/reset 提交/重置;
textarea 文本域;
select/option 选择框/选择项;
placeholder 占位符(起提示作用);
search 搜索;
icon 小图标;
autofocus 自动聚焦;
disabled 禁用;
checked 选中(单选框/复选框);
selected 默认选择项(下拉选择框);
required 必填项;
readonly 只读;
table 表格;
thead/tbody/tfoot 表格标题/主体/底部;
colspan 跨列;
rowspan 跨行;
cellspacing 单元格间距(类似于margin);
cellpadding 单元格边距(类似于padding);
border-collapse: collapse; 边框
相关资料:
详解html中页面跳转传递参数的问题
html5关于标签的知识吧
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群
关于书籍:需要学习资料的小伙伴们可以加群, 点击此处
WEB前端面试题
第二章 面试题基础篇
2.1 HTML面试题
面试题:行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
面试题:页面导入样式时,使用link和@import有什么区别?
面试题:title与h1的区别、b与strong的区别、i与em的区别?
面试题:img标签的title和alt有什么区别?
面试题:png、jpg、gif 这些图片格式解释一下,分别什么时候用?
2.2 CSS面试题
面试题:css背景纹路
面试题:介绍一下CSS的盒子模型
面试题:CSS选择符有哪些?哪些属性可以继承?
面试题:CSS优先级算法如何计算?
面试题:用CSS画一个三角形
面试题:一个盒子不给宽度和高度如何水平垂直居中?
面试题:display有哪些值?说明他们的作用。
面试题:对BFC规范(块级格式化上下文:block formatting context)的理解?
面试题:清除浮动有哪些方式?
面试题:在网页中的应该使用奇数还是偶数的字体?为什么呢?
面试题:写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。
面试题:什么是CSS reset?
面试题:css sprite是什么,有什么优缺点
面试题:display: none;与visibility: hidden;的区别
面试题:position有哪些值?有什么作用? 【特别多公司问】
面试题:line-height和height有什么区别?
面试题:opacity 和 rgba区别
2.3 JavaScript基础面试题
面试题:延迟加载JS有哪些方式?
面试题:JS数据类型有哪些?
面试题:null和undefined的区别
面试题:JS数据类型考题
面试题:==和===有什么不同
面试题:JS微任务和宏任务
面试题:JS作用域考题
面试题:JS对象考题
面试题:JS作用域+this指向+原型 考题
面试题:JS判断变量是不是数组,你能写出哪些方法?
面试题:slice是干嘛的、splice是否会改变原数组
面试题:JS数组去重
面试题:找出多维数组最大值
面试题:给字符串新增方法实现功能
面试题:找出字符串出现最多次数的字符以及次数
2.4 真正移动端 —— H5/C3面试题
面试题:什么是语义化标签
面试题:::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
面试题:如何关闭iOS键盘首字母自动大写
面试题:怎么让Chrome支持小于12px 的文字?
面试题:rem和em有什么样区别
面试题:ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
面试题:webkit表单输入框placeholder的颜色值能改变吗?
面试题:禁止ios 长按时不触发系统的菜单,禁止iosandroid长按时下载图片
面试题:禁止ios和android用户选中文字
面试题:自适应 [淘宝无线适配]
面试题:响应式
第三章 面试题进阶篇
3.1 JavaScript进阶面试题
面试题:new操作符具体做了什么
面试题:闭包 【必须会】
面试题:原型链 【必须会】
面试题: JS继承有哪些方式
面试题:说一下call、apply、bind区别
面试题:sort背后原理是什么?
面试题:深拷贝和浅拷贝
面试题:localstorage、sessionstorage、cookie的区别
3.2 ES6面试题
面试题:var、let、const区别
面试题:作用域考题
面试题:将下列对象进行合并
面试题:箭头函数和普通函数有什么区别?
面试题:Promise有几种状态
面试题:find和filter的区别 【大厂】
面试题:some和every的区别 【大厂】
3.3 webpack面试题
面试题:webpack插件
3.4 Git面试题
面试题:git常用命令
面试题:解决冲突
面试题:GitFlow
第四章 面试题框架篇
4.1 区分初中高级的 —— Vue面试题
面试题:Vue2.x 生命周期有哪些?
1.系统自带八个
2.当一旦进入到某个组件会执行哪些生命周期
3.$el和$data在哪个阶段有
4.如果使用keep-alive会多俩个生命周期
5.如果加入keep-alive第一次进入组件会执行哪些生命周期
6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期
面试题:谈谈你对keep-alive的了解
面试题:v-if和v-show区别
面试题:v-if和v-for优先级 2.x
面试题:ref是什么?
面试题:nextTick是什么?
面试题:Vue中如何做样式穿透
面试题:scoped原理
面试题:Vuex是单向数据流还是双向数据流?
面试题:讲一下MVVM
面试题:双向绑定原理
面试题:什么是虚拟DOM
面试题:key是干什么?
面试题:diff算法
面试题:Vue组件传值
面试题:props和data优先级谁高?
面试题:computed、methods、watch有什么区别?
面试题:Vuex
面试题:Vue路由
面试题:Vue项目打包后出现空白页
4.2 微信小程序面试题
面试题:如何自定义头部?
面试题:如何自定义底部?
4.3 uni-app面试题
面试题:生命周期
面试题:条件编译
第五章 面试题性能优化篇