手动提交动态改变的文本框的值

最新推荐文章于 2023-05-16 09:40:05 发布

梁云亮

最新推荐文章于 2023-05-16 09:40:05 发布

阅读量704

点赞数

分类专栏： # TypeScript/JavaScript/JQuery 文章标签： Submit提交JavaScript动态改变的文本框值 Input属性readonly与disable的区别

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/103063395

版权

TypeScript/JavaScript/JQuery 专栏收录该内容

73 篇文章 4 订阅

订阅专栏

提交JavaScript动态改变的文本框的值

模拟实现CSDN发布博客时，通过JavaScript动态添加文章标签的功能，如下图所示：
在这里插入图片描述

页面代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            function setInputValue() {
                var nameInput = document.getElementById("uname");
                nameInput.value = 'zhangsan';
            }
            function submitFun() {
                var form=document.forms[0];
                form.method="post";
                form.action="#";
                form.submit();
            }
        </script>
    </head>
    <body>
        <form >
            <input type="text" name="uname" id="uname">
            <input type="button" value="设置值" onclick="setInputValue()"><br>
    
            <input type="text" name="uage"><br>
            <input type="button" value="提交" onclick="submitFun()">
        </form>
    </body>
</html>

-效果
初始页面：
在这里插入图片描述
单击设置值按钮：

输入年龄后，单击提交按钮：

在这里插入图片描述

注意：设置uname不可编辑

参考博客：设置input 不可编辑的方法

如果采用disabled 设置不可编辑
```
<input type="text" disabled  name="uname" id="uname">
```
则无法获取用户单击设置按钮后给uname设置的值

如果采用readonly ，设置不可编辑

<input type="text" readonly  name="uname" id="uname">
或
<input type="text" readonly unselectable="on"  name="uname" id="uname">

则可以获取用户单击设置按钮后给uname设置的值
在这里插入图片描述

梁云亮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录