自动读取选择文本值

最新推荐文章于 2021-12-23 03:00:00 发布

1www我

最新推荐文章于 2021-12-23 03:00:00 发布

阅读量241

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44543324/article/details/87454873

本文介绍了如何不依赖按钮，仅通过文本框的选择事件自动读取并传递文本值。通过设置自动加载事件，当用户在文本框中选择内容后，该内容将自动传递到下一个文本框。示例中展示了如何用JavaScript实现这一功能，包括在IE浏览器的兼容性处理，以及如何在多个文本框之间逐级传递文本值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在书上看到一个不一样的读取文本值，平常我们利用文本框都是要输入信息通过点击按钮来进行读取的，这次呢，我们可以不需要用到按钮，只要选择一个文本框里面的内容，然后我们通过自动加载事件，可以自动读取到被选择的文本值，并显示到第二个文本框里，由此可推，我们还可以再多加几个文本框进行依次读取，也就是第二个文本框读取第一个文本框选择的内容，第三个文本框读取第二个文本框选择的文本值，像这样我们可以添加多个文本框进行读取的。

下面可以看看详解：
1、首先，我设置了三个文本框，给第一个文本框设置一个固定的文本值（自定义的），然后也可以给文本框一定的样式。（如图1）
代码：

<head>
<meta charset="utf-8">
<title>自动读取选择文本值</title>
<style>
    #box {
        width: 550px;
        border: 1px solid deepskyblue;
        border-radius: 50%;
        padding: 35px;
    }

    input {
        width: 175px;
        height: 20px;
        border-bottom-left-radius: 2px;
    }

    #a {
        border-color: dodgerblue;
    }

    #b {
        border-color: fuchsia;
    }

    #c {
        border-color: springgreen;
    }
</style>
</head>
<body>
<div id="box">
	<input type="text" id="a" value="我想要带你去浪漫的土耳其">
	<input type="text" id="b">
	<input type="text" id="c">	
</div>

效果：
在这里插入图片描述
（图1）

2、其实细看一下，JS代码还是很简单的，我们给它一个自动加载事件，定义变量来分别获取文本框对应的值，然后呢，给第一个文本框绑定查询事件，来读取被选择的文本值（给出一个判断条件，判断IE浏览器是否兼容，当然简约一点的话，不用作判断也是可以的，再获取被选择的文本值的初始位置和结束位置，截取它的文本值赋值给第二个文本框），第三个文本框的值是通过第二个文本框的值来赋值的，代码都差不多，我们可以看一下代码以及它呈现的效果。（如图2）

代码：

<script>
    //window自动加载事件
    window.onload = function () {
        //定义变量
        var a = document.getElementsByTagName("input")[0];//获取第一个文本框的值
        var b = document.getElementsByTagName("input")[1];//获取第二个文本框的值
        var c = document.getElementsByTagName("input")[2];//获取第三个文本框的值
        //给第一个文本框绑定查询事件
        a.onselect = function () {
            if (document.selection) {//兼容IE
                o = document.selection.createRange();//创建一个选择区域
                if (o.text.length > 0)
                    b.value = o.text;//则就把文本值赋值给第二个文本框
            } else {//兼容标准
                x = a.selectionStart;//获取第一个文本框中选择的初始位置
                y = a.selectionEnd;//获取第一个文本框中选择的结束位置
                b.value = a.value.substring(x, y);//截取文本框中被选择的文本值，赋值给第二个文本框
            }
        }
        //给第二个文本框绑定查询事件
        b.onselect = function () {
            if (document.selection) {
                o = document.selection.createRange();//创建一个选择区域
                if (o.text.length > 0)//如果有选择文本值
                    c.value = o.text;//则就把文本值赋值给第三个文本框
            } else {
                x1 = b.selectionStart;//获取第二个文本框中选择的初始位置
                y1 = b.selectionEnd;//获取第二个文本框中选择的结束位置
                c.value = b.value.substring(x1, y1);//截取文本框中被选择的文本值，赋值给第三个文本框
            }
        }
    }
</script>

选择第一个文本框的内容：
在这里插入图片描述
选择第二个文本框的内容：

（图2）