html页面中文本框的光标控制
本文将介绍几项html页面设计实用技术:1、打开HTML页面时光标自动定位在某个文本框中;2、多个文本框之间的跳转一般需要点击鼠标或者按tab键,如何用回车键来代替;3、如何清空文本框中的内容。
1、打开HTML页面时光标自动定位在某个文本框中
HTML5的“autofocus”属性可以直接完成,如:
<input type="text" id="txt1" autofocus="autofocus">
使用title属性设置需要显示的提示语句,如:
<button type="button" οnclick="myFunction()" title="将上面输入的值合计">合计</button>
完整例子源码如下:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<script>
function myFunction() {
let i=parseFloat(document.getElementById("txt1").value)+
parseFloat(document.getElementById("txt2").value)+
parseFloat(document.getElementById("txt3").value);
alert("合计:" +i)
}
</script>
</head>
<body>
<form>
<p>请留意,页面中文本框的光标控制:打开页面时将光标定位在第一个文本框,tab键跳转文本框</p>
<input type="text" id="txt1" autofocus="autofocus">
<input type="text" id="txt2" >
<input type="text" id="txt3" >
<br>
<button type="button" onclick="myFunction()" title="将上面输入的值合计">合计</button>
</form>
</body>
</html>
保存文件名为:打开html页面时将光标定位在某个文本框.html,用浏览器打开效果如下:
2、HTML中怎样用回车键使光标在输入框间跳转
即用回车键来代替tab键实现一个输入框输完回车跳到下一个输入框
方法一、例子源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>标题</title>
<script>
function handleEnter(field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which
: event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
} else
return true;
}
function myFunction() {
let i=parseFloat(document.getElementById("txt1").value)+
parseFloat(document.getElementById("txt2").value)+
parseFloat(document.getElementById("txt3").value);
alert("合计:" +i)
}
</script>
</head>
<body>
<form>
<p>请留意,页面中文本框的光标控制:打开页面时将光标定位在第一个文本框,回车键跳转文本框</p>
<input type="text" id="txt1" autofocus="autofocus" onkeypress="return handleEnter(this, event)">
<input type="text" id="txt2" onkeypress="return handleEnter(this, event)">
<input type="text" id="txt3" onkeypress="return handleEnter(this, event)">
<br>
<button type="button" onclick="myFunction()" title="将上面输入的值合计">合计</button>
</form>
</body>
</html>
保存文件名为:html表单中回车键跳转文本框.html,用浏览器打开试试
方法二、例子源码如下:
<!DOCTYPE html>
<html>
<meta charset=UTF-8">
<title>标题</title>
<script type="text/javascript">
function focusNextInput(thisInput){
var inputs = document.getElementsByTagName("input");
for(var i = 0;i<inputs.length;i++){
// 如果是最后一个,则焦点回到第一个
if(i==(inputs.length-1)){
inputs[0].focus();
break;
}else if(thisInput == inputs[i]){
inputs[i+1].focus();
break;
}
}
}
function myFunction() {
let i=parseFloat(document.getElementById("txt1").value)+
parseFloat(document.getElementById("txt2").value)+
parseFloat(document.getElementById("txt3").value);
alert("合计:" +i)
}
</script>
</head>
<body>
<form>
<p>请留意,页面中文本框的光标控制:打开页面时将光标定位在第一个文本框,回车键跳转文本框</p>
<input type="text" id="txt1" autofocus="autofocus" onkeypress="if(event.keyCode==13) focusNextInput(this);">
<input type="text" id="txt2" onkeypress="if(event.keyCode==13) focusNextInput(this);">
<input type="text" id="txt3" onkeypress="if(event.keyCode==13) focusNextInput(this);">
<br>
<button type="button" onclick="myFunction()" title="将上面输入的值合计"">合计</button>
</form>
</body>
</html>
保存文件名为:html表单中回车键跳转文本框2.html,用浏览器打开试试
3、如何清空文本框中的内容
例子1、源码如下:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<form>
<input type="text" value="123456" id="txt1" autofocus="autofocus">
<input type="button" value="清空" onclick="document.getElementById('txt1').value=''" />
</form>
</body>
</html>
保存文件名为:清空文本框中的内容.html,你可用浏览器打开试试
例子2、清空多个文本框中的内容,源码如下:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<script>
function myFunction() {
document.getElementById('txt1').value='';
document.getElementById('txt2').value='';
document.getElementById('txt3').value='';
}
</script>
</head>
<body>
<form>
<input type="text" value="123" id="txt1" autofocus="autofocus">
<input type="text" value="456" id="txt2" >
<input type="text" value="789" id="txt3" >
<input type="button" value="清空" onclick="myFunction()" />
</form>
</body>
</html>
保存文件名为:清空多个文本框中的内容.html,你可用浏览器打开试试
附录1
DOM元素(Element)获取的几种方法(method):
★通过ID
getElementByld("id名")
★通过class名
getElementsByClassName("class名")
★通过标签名
getElementsByTagName("标签名")
★通过name属性
getElementsByName(" name名")
★通过选择器获取一个元素
querySelector("选择器名")
★通过选择器获取一组元素
querySelectorAll("选择器名")
提示:参数是字符串的""引号是英文引号,单引号、双引号没有区别。
可参考
w3schools英文JavaScript DOM Elements
w3schools中文JavaScript DOM 元素
MDN(Mozilla Developer Network)Document - Web API 接口参考 | MDN
附录2
document.getElementById("XXX").innerHTML与document.getElementById("XXX").value的区别:
其中,document.getElementById("XXX")表示通过document的方法 getElementById()返回一个匹配特定 ID的元素。
innerHTML 属性能获取对象的内容 或 向对象插入内容,注意innerHTML区分大小写。如
id="aa", 我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容; 也可以对某对象插入内容,如 document.getElementById('aa').innerHTML='这是被插入的内容'。
value 属性设置或返回标签value属性的值。有value属性的标签才能使用getElementById("aa").value——当一个元素有value属性的时候,其value才会有值,如果一个元素没有value值,那么使用document.getElementById().value时是取不到。取到的value是string类型,相加的时候就变成字符串拼接,其他情况自动转换成number类型进行运算。