<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange</title>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当光标离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
</html>
输入小写字母之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange</title>
<style type="text/css">
#kuang {
width: 360px;
height: 36px;
line-height: 36px;
background-color: #f0f0f0;
border: 2px solid #2e2e2e;
font-size: 16px;
border-radius: 7px;
/*border-radius: 50%;*/
/*overflow: hidden;*/
}
#warning{
width: 90px;
color: #e9322d;
font-size: 13px;
margin-top: 0;
display: none;
}
</style>
</head>
<body>
<input type="text" onkeyup="tan()" placeholder="请输入账户" id="kuang">
<p id="warning">请输入用户名</p>
<script>
function tan() {
var a = document.getElementById('kuang').value;
var ab = document.getElementById('kuang');
console.log(a);
var b= document.getElementById('warning');
if(a==""){
ab.style.border=2+'px solid red';
b.style.display='block';
}else{
ab.style.border= 2 +'px solid white';
}
}
</script>
</body>
</html>
初始状态
输入一些字符
然后将字符 backspace
提示框会出现：
知识点
- 这里就是input 文本框和下面的文字会在没有输入内容的时候出现
- 分别给文本框和出现的文字设置ID
- 先说文本框，id=“kuang”，JavaScript中var两个变量分别存他的value值还有就是这个标签，这里特别注意这是两个不同的概念
- var a = document.getElementById(‘kuang’).value;
var ab = document.getElementById(‘kuang’); - 当为空的时候出现文本的样式
- 再说p标签的文字，是先display：none隐藏，当为空的时候block