brython | 获取input等标签的内容

如果你是第一次看brython，建议先阅读前2篇文章

brython | 初始化项目： juejin.cn/post/715364…

brython | HTML 元素： juejin.cn/post/715402…

众所周知，现代web不仅能够浏览信息，还能上传一些信息，从而实现交互功能。比如我们熟知的，会员注册页面等。

通过上一篇的学习，我们初步掌握了使用brython向document插入HTML标签的方法，其实还有很多标签我们还没有学习到，例如: table、input等等。 本章我们主要学习如何获取input标签的内容。

在brython中为按钮绑定方法

我们编写一个简单的demo来分析一下brython中的绑定方法，代码如下：

上述代码中，在body中新增了一个按钮button,其id为: test1_add_btn，按钮值为: “输出1+1=2”，在python中，我们使用browser.document[""]的形式，找到这个按钮元素，从而绑定一个点击事件，绑定的方法为test1_add。

执行test1_add函数时候，我们就将在id为test1标签处追加1+1=2。

具体代码执行可以查看【码上掘金】：测试1：在brython中为按钮绑定方法

code.juejin.cn/pen/7154281…

获取输入标签的内容

上述我们已经铺垫了如何在brython中为按钮绑定事件从而触犯绑定的方法，这节来看下，如何使用brython来获取input、textarea等输入标签的内容。

获取textarea标签的内容

其中textarea较为简单，我们先看如何实现该方法

如上代码，我们在html中定义了一个textarea 和 一个button，并且将id命名为: test2_save_msg，且为该button注册了一个点击事件(如果你还不了解如何在brython为按钮添加绑定事件，可以参考上一节内容)， 而后在该注册的方法中，我们将test2_save_msg的值取出，并且输出到屏幕上。

具体代码执行可以查看【码上掘金】：测试2：在brython中如何获取textarea的数据

code.juejin.cn/pen/7154281…

获取input标签的内容

简单的input标签和textarea标签使用方法类似，这里不再叙述，但是有2个不同的点，一个是单选，一个是复选。

由于单选和复选框，不能将id设置为同一个变量，所以，我们需要借助其name来获取其值，在brython中，获取响应名称的标签方法为: browser.document.getElementsByName(标签名)，它会将name相匹配的数据整合为一个list返回，所以可以使用如下代码进行遍历:

for funItem in browser.document.getElementsByName("fun"):
    pass

在遍历过程中，判断是否已经选择该值，可以查看其下的checked值，已经选择为True，没有选择为False，所以代码可以编写为如下:

funs = []
for funItem in browser.document.getElementsByName("fun"):
    if True == funItem.checked:
        funs.append(funItem.value)

具体代码执行可以查看【码上掘金】：测试3：在brython获取Input数据

code.juejin.cn/pen/7154281…

使用brython做一个小demo

该demo是使用上述方法的集合，具体代码已经放在【码上掘金】：测试5: 使用brython制作一个小demo

code.juejin.cn/pen/7154281…

单独贴一下python代码来分析下:

import browser
sex = ""
funs = []
def test5_saveMsg(event):
    global sex
    global funs
    names = browser.document["names"].value
    age = browser.document["age"].value
    passwd = browser.document["passwd"].value
    other = browser.document["other"].value
    for sexItem in browser.document.getElementsByName("sex"):
        if True == sexItem.checked:
            sex = sexItem.value
    for funItem in browser.document.getElementsByName("fun"):
        if True == funItem.checked:
            funs.append(funItem.value)
    browser.document["test5"] <= browser.html.P("姓名: "+names)
    browser.document["test5"] <= browser.html.P("性别: "+sex)
    browser.document["test5"] <= browser.html.P("年龄: "+age)
    browser.document["test5"] <= browser.html.P("密码: "+passwd)
    browser.document["test5"] <= browser.html.P("爱好: "+str(funs))
    browser.document["test5"] <= browser.html.P("备注: "+str(other))
browser.document["saveMsg"].bind("click",test5_saveMsg)

sex和 funs我们明明在方法test5_saveMsg前已经定义过了，按照python来说，这是属于全局变量，为什么还需要在方法中，声明一次global呢？ 这是由于brython的独特性决定的。当然，在上述代码中，不加也没问题的，但是为了避免后续出错，我们再使用全局变量的时候，一律加上。

总结

在上一篇中，我们学会了在brython中向document追加数据，来达到编写html目的的作用，在本篇中，我们学会了如何获取标签的内容。如果学过一些javascript基础来说，会感觉这个非常熟悉。因为它几乎将javascript那套给搬过来了。

哎呀，今天就这样吧，怎么样，好玩么？ 快来动动你的小手试试吧。点击上述【码上掘金】的链接，选择Fork就可以随意修改了。