likes
comments
collection
share

brython | 获取input等标签的内容通过上一篇的学习,我们初步掌握了使用brython向document插入H

作者站长头像
站长
· 阅读数 25

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

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

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

brython中为按钮绑定方法

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

brython | 获取input等标签的内容通过上一篇的学习,我们初步掌握了使用brython向document插入H

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

执行test1_add函数时候,我们就将在idtest1标签处追加1+1=2

获取输入标签的内容

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

获取textarea标签的内容

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

brython | 获取input等标签的内容通过上一篇的学习,我们初步掌握了使用brython向document插入H

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

获取input标签的内容

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

brython | 获取input等标签的内容通过上一篇的学习,我们初步掌握了使用brython向document插入H

由于单选和复选框,不能将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)

使用brython做一个小demo

单独贴一下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)

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

总结

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

转载自:https://juejin.cn/post/7154386972780265508
评论
请登录