将内容变为大写先通过var s=document.getElementById('demo').value;获取输入框中的内容
document.getElementById('demo').value=s.toUpperCase();将内容改为大写
function DaXie(){
var s=document.getElementById('demo').value;
document.getElementById('demo').value=s.toUpperCase();
}
将内容变为小写的方法
function XiaoXie(){
var s=document.getElementById('demo').value;
document.getElementById('demo').value=s.toLowerCase();
}
通过鼠标的移入变为大写移除变为小写
<input id="demo" name="name" onmouseover="DaXie()" onmouseout="XiaoXie()">
通过按钮来控制大小写
<input id="demo" name="name" >
<br/>
<button type="button" onclick="DaXie()">大写</button>
<button type="button" onclick="XiaoXie()">小写</button>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="demo" name="name" onmouseover="DaXie()" onmouseout="XiaoXie()">
<br/>
<button type="button" onclick="DaXie()">大写</button>
<button type="button" onclick="XiaoXie()">小写</button>
</body>
<script>
function DaXie(){
var s=document.getElementById('demo').value;
document.getElementById('demo').value=s.toUpperCase();
}
function XiaoXie(){
var s=document.getElementById('demo').value;
document.getElementById('demo').value=s.toLowerCase();
}
</script>
</html>