webAPI: 密码框的密码显示和隐藏的功能

clearwater · 发表于 2020-3-3 09:02

本帖最后由 clearwater 于 2020-3-3 11:15 编辑

与问题没有直接性的回复－－－路过、支持、点赞、感谢分享、我也不懂、我也正在学，请不要回复。

以下三个问题，没有相关性，都是我存的零碎的问题一起请教大伙。

1、下面的代码出自至某前端视频教程。这是仿京东的密码登录框，点击小眼睛，密码显示；再点小眼睛，密码隐藏。

我基本上都看懂了，跟着抄也做出来了。－－－教程的代码附在最后面。

但是我有一个问题：35-37行中，为什么要加一个'label'的标签，把图片包起来呢？它在这里起到什么作用？我把label去掉，功能照旧。
（我以前学的这个label的标签，是把光标定位到input里。但是这里我没有看出是起到啥作用。）

链接: https://pan.baidu.com/s/1dDrEvcsMXtdb9D7HtbT4Dg 提取码: mjyj　　　（度盘里放的是代码和图片，代码和下面附的是一样的，多了图片）

2、该套视频教程中老师建议CSS属性值用双引号，JS属性值用单引号。为啥要这样区分？我的意思是都用双引号不行或不好吗？不好在哪？

3、我还没学到框架这块，不过我想过这个问题了，借这个机会请大神简单、通俗点一下。不用介绍太复杂或太详细，因为我还没学到这块，相关的术语或语法我也听不懂。

国外用vue的多不多？　假如我用vue的话，和一个老外朋友共同写一个网站，会不会无法共同协作？

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function() {
            // 点击一次之后， flag 一定要变化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 赋值操作
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }

        }
    </script>
</body>

</html>

my52hook · 发表于 2020-3-3 09:06

现在都流得HTML5了, 精简了很多标签.

幼稚鬼 · 发表于 2020-3-3 09:59

本帖最后由幼稚鬼于 2020-3-3 10:01 编辑

问题1： label标签用于包裹元素或关联指定元素，包裹用法：

[HTML] 纯文本查看 复制代码

<label>男<input type="radio"/></label>
<label>女<input type="radio"/></label>

当在页面中点击文字“男”、“女”，会触发同一个label包裹的单选框进行选中。
关联元素：不用包裹指定元素就能关联触发，用for="目标元素ID"，例子看这个 https://www.w3school.com.cn/tags/tag_label.asp

问题2：我想老师推荐css用双引号，而js用单引号的原因，前者是出于规范和减少引号冲突的目的，比如

[CSS] 纯文本查看 复制代码

 div:after{
    content: "I Said Don't Touch Me";
}

里面的句子出现了单引号，如果再用单引号包裹又会出现你上个帖子的问题。
js虽然也有同样的问题，但一般用于修改页面元素、css样式，其中css样式又有用到引号，一单一双包裹就不容易冲突，案例如下：

[JavaScript] 纯文本查看 复制代码

    var divElem = document.getElementById('test');
    divElem.setAttribute('style','font-family:"微软雅黑";color: #fff; ');

js设置某个元素的"style"属性，里面有可能用到双引号，这样就不用容易冲突，也减少考虑符号转义问题。

打工仔-知恩 · 发表于 2020-3-3 10:00

1.label 元素不会向用户呈现任何特殊效果，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。你的label标签for属性要取绑定下面的一个id值才有存不存在的意义
2.js属性值和css属性用不同的引号，一是为了更直观的区分，二就是养成习惯，操作复杂时不容易产生语法错误
3.国内主要用 vue ，国外没多少用，不过还是有的，合作出一个项目文档就好了。

linguo2625469 · 发表于 2020-3-3 10:05

第一个问题猜测是为了点击小眼睛时让光标继续保持在input里不然你点了小眼睛焦点会失焦，键盘会收起
第二个问题这只是一种统一规范，是大厂们或者什么人一起制定的，但是其实浏览器对你单引号还是双引号无所谓，你爱怎么写怎么写，不过你单双引号随便写很混乱的话就感觉很low、
第三个问题国外用的也挺多的如果老外也是vue那不存在协同问题只存在你听不听得懂他说话。另外一个项目用什么框架肯定是提前商量好的然后使用相同的不可能你用vue老外用react

linguo2625469 · 发表于 2020-3-3 10:13

你把35行改成

[HTML] 纯文本查看 复制代码

<label for="pwd">

再试试就懂了

clearwater · 发表于 2020-3-3 11:14

本帖最后由 clearwater 于 2020-3-3 11:27 编辑

@幼稚鬼
@打工仔-知恩
@linguo2625469

非常感谢三位大神的帮助。在2-3天内，给各位各评一个热心。（今天早上一下子我都用光了好多，不知还有没有能量，所以估计要等明天才开始评分。）

我手上有多少能量，先回答先评，后面的不要误会。

另外，由于这几天，我给别人有时候只给一个热心，有时只给一个CB，所以论坛系统还给我的热心和CB币出现的时间也不是对等，所以万一我手上有成对的CB和热心，我就给成对的；假如没有，我就只给热心，希望各位不要介意，或误会。和答案优质与否，无关。

P.S.　@幼稚鬼
等给本楼的人都评好分之后，我再给您补两个CB币，上帖我手滑，点错了。

yc19951005 · 发表于 2020-3-3 14:08

这不是清水吗好久不见

打工仔-知恩 · 发表于 2020-3-3 18:48

本帖最后由打工仔-知恩于 2020-3-3 18:53 编辑

clearwater 发表于 2020-3-3 11:14
@幼稚鬼
@打工仔-知恩
@linguo2625469

没事评不评分什么的不重要，主要是能一起学习，进步就行了

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] webAPI: 密码框的密码显示和隐藏的功能

免费评分

免费评分

免费评分

免费评分

你之前的帖子我也参与过耶

免费评分