JavaScript标签的Value属性

最新推荐文章于 2025-06-23 23:49:47 发布

原创最新推荐文章于 2025-06-23 23:49:47 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨了HTML中文件输入控件与文本区域的交互原理，解析了如何通过按钮触发文件选择与读取，以及如何捕获文本框的输入内容。深入介绍了value属性在不同场景下的表现，并提供了代码示例。

<body>
    <input type="file" value="12345"><br>
    <button name="btn1">点击文件</button>
    <textarea value="12345">请您在此留言</textarea><br>
    <button name="btn2">点击留言</button>
<script>
        var oBtn1 = document.querySelector('[name="btn1"]');
        oBtn1.onclick = function(){
            var oFile = document.querySelector('[type="file"]');
            // 设定在标签内部的value属性是不起作用的,未上传文件时获取的结果是 空字符串
            // 通过点击选择上传内容之后,可以通过value属性,正确获取数据参数 
            console.log(oFile.value);
        }

        var oBtn2 = document.querySelector('[name="btn2"]');
        oBtn2.onclick = function(){
            var oText = document.querySelector('textarea');
            // 设定在标签内部的value属性是不起作用的,未输入内容时获取的结果是 空字符串
            // 设定标签内容,或者写入内容之后,可以通过value属性获取标签数据 
            console.log(oText.value);
        }
</script>