<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
width: 300px;
height: 36px;
padding-left: 5px;
color: #ccc;
}
label {
position: absolute;
top: 82px;
left: 56px;
font-size: 12px;
color: #ccc;
cursor: text;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
京东:<input id="inp1" type="text" value="我是京东"/><br><br>
淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text"/><br><br>
placeholder:<input type="text" placeholder="我是placeholder"/>
<script>
//------------------------文本框获取焦点-----------------------------
//需求:京东的获取焦点。
//思路:京东的input按钮获取了插入条光标立刻删除内容。失去插入条光标显示文字。
//步骤:
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var inp1 = document.getElementById("inp1");
//2.绑定事件(获取焦点事件onfocus)
inp1.onfocus = function () {
//判断,如果input里面的内容是“我是京东”,那么把值赋值为“”;
if(this.value === "我是京东"){
// inp1.style.color = "#000";
inp1.value = "";
}
}
//(失去焦点事件)焦点:插入条光标onblur
inp1.onblur = function () {
//失去焦点后判断,如果input内容为空,那么把内容赋值为我是京东。
if(this.value === ""){
//3.书写事件驱动程序
// inp1.style.color = "#ccc";
inp1.value = "我是京东";
}
}
//需求:淘宝的获取焦点。
//思路:在input中输入文字,label标签隐藏,里面的文字变成空字符串,label显示。
//步骤:
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var inp2 = document.getElementById("inp2");
var lab = document.getElementsByTagName("label")[0];
//2.绑定事件(输入事件,文字的输入和删除都会触动这个事件)
//获取插入条光标
// inp2.focus();
inp2.oninput = function () {
//3.书写事件驱动程序
//判断input中的值是否为空,如果为空,那么label显示,否则隐藏。
if(this.value === ""){
lab.className = "show";
}else{
lab.className = "hide";
}
}
//---------------------------禁用文本框----------------------------
// 账号: <input type="text" value="传智你好..."/><button>禁用</button><button>解禁</button><br><br>
// 密码: <input type="password" value="aaabbbccc"/>
//需求:禁用文本框
//步骤:
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var inp = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
//2.绑定事件
btn1.onclick = function () {
//3.书写事件驱动程序
inp.disabled = "no";
}
btn2.onclick = function () {
//3.书写事件驱动程序
inp.disabled = false;
// inp.removeAttribute("disabled");
}
//-------------------------------for循环为文本框赋值-------------------
// <input type="text"/><br><br>
// <input type="text"/><br><br>
// <input type="text"/><br><br>
// <input type="text"/><br><br>
// <input type="text"/><br><br>
// <input type="text"/><br><br>
// <button>赋值</button><br><br>
// <button>取值</button><br><br>
//for循环赋值
//老三步
var inpArr = document.getElementsByTagName("input");
var btnArr = document.getElementsByTagName("button");
//赋值
btnArr[0].onclick = function () {
//循环为每一个input赋值
for(var i=0;i<inpArr.length;i++){
inpArr[i].value = i;
}
}
//获取值
btnArr[1].onclick = function () {
//循环获取nput的值赋值为一个数组
var newArr = [];
for(var i=0;i<inpArr.length;i++){
newArr.push(inpArr[i].value);
}
console.log(newArr.join(" "));
}
//----------------------------文本框的全选和反选--------------------------
// <style>
// * {
// padding: 0;
// margin: 0;
// }
// .wrap {
// width: 300px;
// margin: 100px auto 0;
// }
// table {
// border-collapse: collapse;
// border-spacing: 0;
// border: 1px solid #c0c0c0;
// width: 300px;
// }
// th, td {
// border: 1px solid #d0d0d0;
// color: #404060;
// padding: 10px;
// }
// th {
// background-color: #09c;
// font: bold 16px "微软雅黑";
// color: #fff;
// }
// td {
// font: 14px "微软雅黑";
// }
// tbody tr {
// background-color: #f0f0f0;
// }
// tbody tr:hover {
// cursor: pointer;
// background-color: #fafafa;
// }
// </style>
window.onload = function () {
//需求1:点击上面的的input,下面全选或者反选。
//思路:获取了上面的input按钮,只需要判断,checked属性是true还是false,如果是true,下面的全部变成true;false同理。
//老三步
var topInp = document.getElementById("theadInp");
var tbody = document.getElementById("tbody");
var botInpArr = tbody.getElementsByTagName("input");
//绑定事件
topInp.onclick = function () {
//牛劲版
// for(var i=0;i<botInpArr.length;i++){
// if(topInp.checked === true){
// botInpArr[i].checked = true;
// }else{
// botInpArr[i].checked = false;
// }
// }
//费劲版
// if(topInp.checked){
// for(var i=0;i<botInpArr.length;i++){
// botInpArr[i].checked = true;
// }
// }else{
// for(var i=0;i<botInpArr.length;i++){
// botInpArr[i].checked = false;
// }
// }
//优化版(被点击的input按钮的checked属性值,应该直接作为下面的所有的input按钮的checked属性值)
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].checked = this.checked;
}
}
//需求2:点击下面的的input,如果下面的全部选定了,上面的全选,否则相反。
//思路:为下面的每一个input绑定事件,每点击一次都判断所有的按钮
// checked属性值是否全部都是true,如果有一个是false,
// 那么上面的input的checked属性也是false;都是true,topInp的checked就是true;
//老三步
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].onclick = function () {
//开闭原则
var bool = true;
//检测每一个input的checked属性值。
for(var j=0;j<botInpArr.length;j++){
if(botInpArr[j].checked === false){
bool = false;
}
}
topInp.checked = bool;
}
}
}
</script>
</body>
</html>
js文本框操作 获取焦点 禁用 for赋值 全选 等
最新推荐文章于 2024-05-07 17:00:15 发布