html页面中文本框的光标控制

学习&实践爱好者

已于 2022-06-19 10:15:21 修改

阅读量4k

点赞数

分类专栏： HTML5与CSS3 JavaScrip技术文章标签： html javascript

于 2022-06-09 21:45:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/125207737

版权

JavaScrip技术同时被 2 个专栏收录

117 篇文章 24 订阅

订阅专栏

HTML5与CSS3

78 篇文章 14 订阅

订阅专栏

html页面中文本框的光标控制

本文将介绍几项html页面设计实用技术：1、打开HTML页面时光标自动定位在某个文本框中；2、多个文本框之间的跳转一般需要点击鼠标或者按tab键，如何用回车键来代替；3、如何清空文本框中的内容。

1、打开HTML页面时光标自动定位在某个文本框中

HTML5的“autofocus”属性可以直接完成，如：

使用title属性设置需要显示的提示语句，如：

完整例子源码如下：

<!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类型进行运算。

参考https://www.jb51.net/article/95903.htm

https://www.cnblogs.com/cxyz/p/15132781.html

学习&实践爱好者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html页面中文本框的光标控制

本文将介绍几项html页面设计实用技术：1、打开HTML页面时光标自动定位在某个文本框中；2、多个文本框之间的跳转一般需要点击鼠标或者按tab键，如何用回车键来代替；3、如何清空文本框中的内容。...............
复制链接

扫一扫