Html 获取输入 type=text 看起来像 type=password

Get input type=text to look like type=password

提问by Benjamin Gruenbaum

tl;dr

tl;博士

I have an input with type=textwhich I want to show stars like an input with type=passwordusing only CSS.

我有一个输入type=text，我想用它显示星星，就像type=password只使用 CSS的输入一样。

---

---

Basically I have a form with the following input:

基本上我有一个带有以下输入的表单：

<input type='text' value='hello' id='cake' />

I'm not generating the form, I don't have access to its HTML at all. I do however have access to CSS applied to the page.

我没有生成表单，我根本无法访问它的 HTML。但是，我确实可以访问应用于页面的 CSS。

What I'd like is for it to behave like type=password, that is - to show up stars for what the user typed rather than the actual text being typed. Basically, I'd want that aspect (the presentation of user input) to look like a type=passwordfield.

我想要的是让它表现得像type=password，也就是说 - 为用户输入的内容而不是正在输入的实际文本显示星星。基本上，我希望该方面（用户输入的呈现）看起来像一个type=password字段。

Since this seems like a presentation only issue, I figured there has to be a way to do this with CSS since it's in its responsibility domain. However - I have not found such a way. I have to support IE8+ but I'd rather have a solution that works for modern browsers only over no solution at all. Extra points for preventing copy/paste functionality but I can live without that.

由于这似乎只是一个演示问题，我认为必须有一种方法可以用 CSS 来做到这一点，因为它在其职责范围内。但是 - 我还没有找到这样的方法。我必须支持 IE8+，但我宁愿有一个仅适用于现代浏览器的解决方案，而根本没有解决方案。防止复制/粘贴功能的额外积分，但我可以没有它。

Note:In case that was not clear I can not add HTML or JavaScript to the page - only CSS.

注意：如果不清楚，我不能向页面添加 HTML 或 JavaScript - 只有 CSS。

---

---

(Only thing I've found is this questionbut it's dealing with a jQuery related issue and it has a JavaScript solution)

（我唯一发现的是这个问题，但它正在处理与 jQuery 相关的问题，并且它有一个 JavaScript 解决方案）

回答by ShrekOverflow

Well as @ThiefMaster suggested

正如@ThiefMaster 建议的那样

input.pw {
    -webkit-text-security: disc;
}

However, this will work in browsers that are webkit descendants.. Opera, Chrome and Safari, but not much support for the rest, another solution to this is using webfonts.

但是，这将适用于 webkit 后代的浏览器。Opera、Chrome 和 Safari，但对其余浏览器的支持不多，另一个解决方案是使用 webfonts。

Use any font editing utility like FontForgeto create a font with all the characters to be *( or any symbol you want ). Then use CSS web fonts to use them as a custom font.

使用任何字体编辑实用程序（如FontForge）创建包含所有字符*（或您想要的任何符号）的字体。然后使用 CSS Web 字体将它们用作自定义字体。

回答by Benjamin Gruenbaum

You can create a font made only of dots

您可以创建仅由点组成的字体

@font-face
    {
    font-family:'dotsfont';
    src:url('dotsfont.eot');
    src:url('dotsfont.eot?#iefix')  format('embedded-opentype'),
        url('dotsfont.svg#font')    format('svg'),
        url('dotsfont.woff')        format('woff'),
        url('dotsfont.ttf')         format('truetype');
    font-weight:normal;
    font-style:normal;
}

input.myclass
    {-webkit-text-security:disc;font-family:dotsfont;}

This might be what you're looking for...

这可能就是你要找的...

There are many glyphs to define but there might be a simpler way to do that.. You can create a totally empty font and define only the .notdefglyph (glyph ID 0) which is used as a replacement when another glyph is not defined

有很多字形要定义，但可能有一种更简单的方法来做到这一点..您可以创建一个完全空的字体并仅定义.notdef字形（字形 ID 0），当另一个字形未定义时用作替代品

As you probably know, it usually looks like this:

您可能知道，它通常如下所示：

So, you should replace that with a dot/asterisk and test what happens with browsers... because i'm not sure if it does work on all of them (some may want to use their own missing glyph replacement). Let me know if you try...

所以，你应该用点/星号替换它并测试浏览器会发生什么......因为我不确定它是否适用于所有浏览器（有些人可能想使用他们自己丢失的字形替换）。如果您尝试，请告诉我...

HTH

HTH

回答by ThiefMaster

In WebKit-based browsers you can do so using the -webkit-text-securityproperty. It even allows you to select the shape of the bullets (disc, circle, square).

在基于 WebKit 的浏览器中，您可以使用该-webkit-text-security属性来实现。它甚至允许您选择子弹的形状（圆盘、圆形、方形）。

input.pw {
    -webkit-text-security: disc;
}

Demo: http://jsfiddle.net/ThiefMaster/6uJJw/1/

演示：http: //jsfiddle.net/ThiefMaster/6uJJw/1/

However, this is apparently non-standard. At least the Safari CSS docssay it's an "Apple Extension". It works fine in Chrome - obviously - but I don't think any other rendering engine supports it...

然而，这显然是不标准的。至少Safari CSS 文档说它是“Apple 扩展”。它在 Chrome 中运行良好 - 显然 - 但我认为任何其他渲染引擎都不支持它......

回答by Walk

This works only for textfield (:

这仅适用于text字段 (:

input { -webkit-text-security: none; } 
input { -webkit-text-security: circle; } 
input { -webkit-text-security: square; } 
input { -webkit-text-security: disc; /* Default */ }

回答by rvnlord

I ended up in this thread a lot of times recently. My solution is utilizing JQueryinput event (though it can also be written in raw JSor even in C#(Blazor) should you need it, the idea would be the same):

我最近在这个线程中结束了很多次。我的解决方案是利用JQuery输入事件（尽管它也可以用 rawJS甚至C#( Blazor)编写，如果你需要它，想法是一样的）：

The core part is:

核心部分是：

if (isPasswordVisible) { // if password is visible, then simply update value stored in the dictionary
    value = newValue;
    passwordInputsValues[$passwordInput.attr("my-guid")] = value;
} else { // else compute and update stored value
    const newValueUntilCaret = newValue.take(caretPosition); // take chars before the caret
    const unchangedCharsAtStart = newValueUntilCaret.takeWhile(c => c === "●").length; // count unchanged chars from the beginning
    const unchangedCharsAtEnd = newValue.skip(caretPosition).length; // count unchanged chars after the caret
    const insertedValue = newValueUntilCaret.skip(unchangedCharsAtStart); // get newly added string if any
    value = oldValue.take(unchangedCharsAtStart) + insertedValue + oldValue.takeLast(unchangedCharsAtEnd); // create new value as concatenation of old value left part, new string and old value right part
    passwordInputsValues[$passwordInput.attr("my-guid")] = value; // store newly created value in the dictionary
    $passwordInput.prop("value", value.split("").map(_ => "●").join("")); // set value of the input to new masked value
    $passwordInput[0].setSelectionRange(caretPosition, caretPosition); // set caret position to match the appropriate position 
}

Below is the complete code of an example password control (I will try to update it if any problems arise):

下面是一个示例密码控件的完整代码（如果出现任何问题，我会尝试更新它）：

// Utils 

var guid = () => {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        const r = Math.random() * 16 | 0;
        const v = c === "x" ? r : r & 0x3 | 0x8;
        return v.toString(16);
    });
}

// Array Extensions

Object.defineProperty(Array.prototype, "skip", {
    value: function (n) {
        if (typeof (n) !== "number") {
            throw new Error("n is not a number");
        }
        return this.slice(n);
    },
    writable: true,
    configurable: true
});

Object.defineProperty(Array.prototype, "take", {
    value: function (n) {
        if (typeof (n) !== "number") {
            throw new Error("n is not a number");
        }
        return this.slice(0, n);
    },
    writable: true,
    configurable: true
});

Object.defineProperty(Array.prototype, "takeLast", {
    value: function (n) {
        if (typeof (n) !== "number") {
            throw new Error("n is not a number");
        }
        return this.slice(Math.max(this.length - n, 0));
    },
    writable: true,
    configurable: true
});

Object.defineProperty(Array.prototype, "takeWhile", {
    value: function (condition) {
        if (typeof (condition) !== "function") {
            throw new Error("condition is not a function");
        }

        const arr = [];
        for (let el of this) {
            if (condition(el))
                arr.push(el);
            else
                break;
        }
        return arr;
    },
    writable: true,
    configurable: true
});

// String Extensions

Object.defineProperty(String.prototype, "skip", {
    value: function (n) {
        return this.split("").skip(n).join("");
    },
    writable: true,
    configurable: true
});

Object.defineProperty(String.prototype, "take", {
    value: function (n) {
        return this.split("").take(n).join("");
    },
    writable: true,
    configurable: true
});

Object.defineProperty(String.prototype, "takeLast", {
    value: function (n) {
        return this.split("").takeLast(n).join("");
    },
    writable: true,
    configurable: true
});

Object.defineProperty(String.prototype, "takeWhile", {
    value: function (condition) {
        return this.split("").takeWhile(condition).join("");
    },
    writable: true,
    configurable: true
});

// JQuery Document Ready

$(document).ready(function() {
    let isPasswordVisible = false;
    const passwordInputsValues = {};

    for (let $pi of $(".my-password-input").toArray().map(pi => $(pi))) {
        const uid = guid();
        $pi.attr("my-guid", uid);
        passwordInputsValues[uid] = $pi.prop("value");
    }
 
    $(document).on("input", ".my-password-input", async function(e) {
        const $passwordInput = $(this);
        const newValue = $passwordInput.prop("value");
        const oldValue = passwordInputsValues[$passwordInput.attr("my-guid")] || ""; // first time it will be undefined
        const caretPosition = Math.max($passwordInput[0].selectionStart, $passwordInput[0].selectionEnd);
        let value;

        if (isPasswordVisible) {
            value = newValue;
            passwordInputsValues[$passwordInput.attr("my-guid")] = value;
        } else {
            const newValueUntilCaret = newValue.take(caretPosition);
            const unchangedCharsAtStart = newValueUntilCaret.takeWhile(c => c === "●").length;
            const unchangedCharsAtEnd = newValue.skip(caretPosition).length;
            const insertedValue = newValueUntilCaret.skip(unchangedCharsAtStart);
            value = oldValue.take(unchangedCharsAtStart) + insertedValue + oldValue.takeLast(unchangedCharsAtEnd);
            passwordInputsValues[$passwordInput.attr("my-guid")] = value;
            $passwordInput.prop("value", value.split("").map(_ => "●").join(""));
            $passwordInput[0].setSelectionRange(caretPosition, caretPosition);
        }
    });

    $(document).on("click", ".my-btn-toggle-password-visibility", function() {
        const $btnTogglePassword = $(this);
        const $iconPasswordShown = $btnTogglePassword.find(".my-icon-password-shown");
        const $iconPasswordHidden = $btnTogglePassword.find(".my-icon-password-hidden");
        const $passwordInput = $btnTogglePassword.parents(".my-input-group").first().children(".my-password-input").first();
        const value = passwordInputsValues[$passwordInput.attr("my-guid")];

        if (!isPasswordVisible) {
            $iconPasswordHidden.removeClass("my-d-flex").addClass("my-d-none");
            $iconPasswordShown.removeClass("my-d-none").addClass("my-d-flex");
            $passwordInput.prop("value", value);
            isPasswordVisible = true;
        } else {
            $iconPasswordShown.removeClass("my-d-flex").addClass("my-d-none");
            $iconPasswordHidden.removeClass("my-d-none").addClass("my-d-flex");
            $passwordInput.prop("value", value.split("").map(_ => "●").join(""));
            isPasswordVisible = false;
        }
    });
});

body {
    padding-top: 0;
    color: white;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    height: 100%;
    max-height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAAAAABURb1YAAAFnklEQVR4AWWXCY4cwXbE6h4JMhCvMPc/ov+3Ox9QsLCGpKlFHILd+UQ559AGDkBSFXWmomonqkL/XuUcIPUcONjHCJyE36KaqNiaRnVCG9TGpgIU9hIfohCBVGj24ammo04lU3Fy0NZDAyZi5AElHjgEGlRbG1WjraIt7TmADQkAaoEHsOXAAaeqat9RVTqjosyEH5W+DQCQt8BzIJMfXJI3e5tGRefSlRn3NrO3scnvNl26FN5RITGNfjm3GM/+FhQgnlQeImC+dEm8rzHVTNGL9EADVsTAIfGJBziRy7RlmcZU1IYpHIj+4JrWym8/XSwzompmFNVOFdTOAAfs61KZ6eXcp57fykQUOxNBmTesz2HpCnCg3UV/bA7VRpWGNqKtrYLTs0ilCjgxiZxjeLC5dDPBFn4Pn2ja6BRUL10DTgET4Focq8rn8casxV4E5tIlZvytqtfivCOKZrqc38G7egnkXecyPZdzubc57VtUnbfL+a0u3b1N3d9Mci7cKocHoh3xihLQ6fXUlgTOOfVkXSUFINoWHhqxE23RTmCqtoEJaITkIrUCkU9fnqpqm+40VSXS3CLaSzfGBb4rPuOSfN0ylLve6/jpcrbL2dTlnOdv5AamKjLvLN1XruMNS/cul/hx8twKpKYRaE2DOp8+c+lW7uVXVQ7Vx0x1G3HXjNocsHCac7NbWc6egwJVHu2kRTVNC2pqv2U4XNsv5/yWJlV9+NJ1C7xluInlcr7rK+Kg+qy7onQqgnbi7UHcS3qXjdw3bO5tumycYlVssMI5EXXpRnatPK362KodtVU60cm+eQT10sVLFwJYlVaf7UGSoi5dQF3DvnTX3UvXTPO8quKH7jsXhm/PxfKWZXqBM5sS33kmKtC31Q05fI095i5IPpyzRXqSy1Sr17p1F7NE8vMtnNbLpVVtk8c0OrfF0sKxHnIpYgHW4puMomTz8mgmrSjpvrxhX97l7LqLpl7bW9BH9/MNzF8XwRqL8/m7c30eFYV5VX3QTquK06XbLt16F4ks+8Z9m6gPtpcuk3OvibCekng4lzMHi9MoqZmKj9tdbQCbc7bcEA+oEJduRNNL1waf1tuI9MDBUK8t3k9uFz3rrqadO9Ln9TL/ezlwDvky3TW7ZmXfpc77TN0yhOXnP939LvVDV9s+tgLTm0TqYd1lea3PRFuVjLa562HdPbCfascGrvO3DMeIATVqVRO8vfHrbupdfo1dzlXUdkVLZsS1mLPG3rWcl+4B1l1537h0VXzU1tyLG7cCu+LSrSqo06hocy3WCcil65qHDbuEYzQN2HpT3jFt9LEFvHTP1nxbXOEkbhkKmd+6BTfVZ/I143z/Fyz6Za92o0I7I6gzfeYAHPwy/Rb43L9TLtMt8CtwW1xvQvbR1g9n7qJRNN1kdxcdH7cM58Szxq679MdLOhE72t6VNEpHHkzwRyjBcGth+dE99pIkVbWaEWmvnQ8Yl7Mp59zpRWXdNo6odrO754Zzvxf/010nP7onb1TR+bgbVPB9PcADJvH/043Kvk0UzLRxQ6UiaeTAcyxYl2lyrrvZv8v2wE7U1uVcST0821jJeIDKWuyxiqnuko7q3+zJYXJ46nV3D67EyL+lQ9F2qkr+3kUafQpwYE8T329p6y7OX1TF97fQv/c+l87zj7Hsgpig4qRLd9fMPs74rLGyCzRbhmVqpy7nqvPmTD1gvKe7b2U8u1QzmtuDuEtbgT3c8QBJveo6cueFkUwv59nVmfFw1jl4/unuOT9qERV76ers8n23z/c8/Xy7a4lwwLplmGusbRp33Up13+ZDN3KPxNVMhY62vUQyRTse6+cKHtZYjIfDh260Cjbb3Vy6R8H8SMBzqSwrsB1UTacoknlnOb8V4JD9Njfpwz/fHjpBUeevcAtcl65sqXPX9D87RUTLc/dfOgAAAABJRU5ErkJggg==);
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-repeat: repeat;
    background-size: auto;
    background-position: left top;
}

.snippet-container {
    background: linear-gradient(135deg, #202020, black);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
}

.my-password-input {
    background: linear-gradient(to bottom, #303030, #000000);
    color: white;
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 5px 9px;
    line-height: 24px;
    height: 34px;
    box-shadow: inset 0 0 0 1px #404040;
    font-size: 16px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    transition: all .15s ease-in-out;
    width: 100%;
    border: none;
}

.my-password-input:enabled:focus {
    color: white;
    box-shadow: inset 0 0 0 1px #404040, 0 0 6px 2px blue;
    outline: none;
}

.my-input-group {
    position: relative;
}

    .my-input-group > .my-input-group-prepend {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
    }

    .my-input-group > .my-input-group-append {
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
    }

.my-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.my-input-group > .my-input-group-prepend > .my-icon,
.my-input-group > .my-input-group-append > .my-icon {
    width: auto;
    height: 16px;
    max-width: none;
    max-height: 16px;
    flex: 0 0 auto;
    margin: 9px;
}

    .my-input-group > .my-input-group-prepend > .my-icon > svg,
    .my-input-group > .my-input-group-append > .my-icon > svg {
        height: 100%;
        width: auto;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

.my-input-group > .my-input-group-prepend > .my-btn,
.my-input-group > .my-input-group-append > .my-btn {
    height: 100% !important;
    width: auto;
}

button:enabled {
    cursor: pointer;
}

.my-btn {
    background: linear-gradient(to bottom, #303030, #000000);
    color: white;
    position: relative;
    box-sizing: border-box;
    padding: 5px;
    line-height: 24px;
    height: 34px;
    font-size: 16px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    transition: all .15s ease-in-out;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: 0 0 0 0 #FFFFFF, inset 0 0 0 1px #404040;
}

.my-btn-primary {
    color: #fff;
    background: linear-gradient(to bottom, #00008B, #000000);
    box-shadow: 0 0 0 0 #FFFFFF, inset 0 0 0 1px #0000FF;
}

    .my-btn-primary:hover:enabled {
        box-shadow: 0 0 6px 2px #FFFFFF, inset 0 0 0 1px #FFFFFF;
        background: linear-gradient(to top, #00008B, #000000);
    }

.my-btn > .my-icon {
    margin: 4px;
    width: auto;
    height: 16px;
    max-width: none;
    max-height: 16px;
    flex: 0 0 auto;
}

    .my-btn > .my-icon > svg {
        height: 100%;
        width: auto;
    }

.my-d-none {
    display: none !important;
}

.my-d-flex {
    display: flex !important;
}

::-webkit-input-placeholder {
    color: #404040;
    font-style: italic;
}

:-moz-placeholder {
    color: #404040;
    font-style: italic;
}

::-moz-placeholder {
    color: #404040;
    font-style: italic;
}

:-ms-input-placeholder {
    color: #404040;
    font-style: italic;
}

::-moz-selection {
    background-color: #f8b700;
    color: #352011;
}

::selection {
    background-color: #f8b700;
    color: #352011;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="snippet-container">
    <div class="my-input-group">
        <input type="text" placeholder="Password..." class="my-password-input" style="padding-left: 38px; padding-right: 47px;">
        <div class="my-input-group-prepend">
            <div class="my-icon" style="">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="">
                    <path d="M336 32c79.529 0 144 64.471 144 144s-64.471 144-144 144c-18.968 0-37.076-3.675-53.661-10.339L240 352h-48v64h-64v64H32v-80l170.339-170.339C195.675 213.076 192 194.968 192 176c0-79.529 64.471-144 144-144m0-32c-97.184 0-176 78.769-176 176 0 15.307 1.945 30.352 5.798 44.947L7.029 379.716A24.003 24.003 0 0 0 0 396.686V488c0 13.255 10.745 24 24 24h112c13.255 0 24-10.745 24-24v-40h40c13.255 0 24-10.745 24-24v-40h19.314c6.365 0 12.47-2.529 16.971-7.029l30.769-30.769C305.648 350.055 320.693 352 336 352c97.184 0 176-78.769 176-176C512 78.816 433.231 0 336 0zm48 108c11.028 0 20 8.972 20 20s-8.972 20-20 20-20-8.972-20-20 8.972-20 20-20m0-28c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z" style="fill: white"></path>
                </svg>
            </div>
        </div>
        <div class="my-input-group-append">
            <button class="my-btn my-btn-primary my-btn-toggle-password-visibility" style="width: 38px">
                <div class="my-icon my-icon-password-shown my-d-none" style="">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" style="">
                        <path d="M288 288a64 64 0 0 0 0-128c-1 0-1.88.24-2.85.29a47.5 47.5 0 0 1-60.86 60.86c0 1-.29 1.88-.29 2.85a64 64 0 0 0 64 64zm284.52-46.6C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 96a128 128 0 1 1-128 128A128.14 128.14 0 0 1 288 96zm0 320c-107.36 0-205.46-61.31-256-160a294.78 294.78 0 0 1 129.78-129.33C140.91 153.69 128 187.17 128 224a160 160 0 0 0 320 0c0-36.83-12.91-70.31-33.78-97.33A294.78 294.78 0 0 1 544 256c-50.53 98.69-148.64 160-256 160z" style="fill: white"></path>
                    </svg>
                </div>

                <div class="my-icon my-icon-password-hidden" style="">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" style="">
                        <path d="M637 485.25L23 1.75A8 8 0 0 0 11.76 3l-10 12.51A8 8 0 0 0 3 26.75l614 483.5a8 8 0 0 0 11.25-1.25l10-12.51a8 8 0 0 0-1.25-11.24zM320 96a128.14 128.14 0 0 1 128 128c0 21.62-5.9 41.69-15.4 59.57l25.45 20C471.65 280.09 480 253.14 480 224c0-36.83-12.91-70.31-33.78-97.33A294.88 294.88 0 0 1 576.05 256a299.73 299.73 0 0 1-67.77 87.16l25.32 19.94c28.47-26.28 52.87-57.26 70.93-92.51a32.35 32.35 0 0 0 0-29.19C550.3 135.59 442.94 64 320 64a311.23 311.23 0 0 0-130.12 28.43l45.77 36C258.24 108.52 287.56 96 320 96zm60.86 146.83A63.15 63.15 0 0 0 320 160c-1 0-1.89.24-2.85.29a45.11 45.11 0 0 1-.24 32.19zm-217.62-49.16A154.29 154.29 0 0 0 160 224a159.39 159.39 0 0 0 226.27 145.29L356.69 346c-11.7 3.53-23.85 6-36.68 6A128.15 128.15 0 0 1 192 224c0-2.44.59-4.72.72-7.12zM320 416c-107.36 0-205.47-61.31-256-160 17.43-34 41.09-62.72 68.31-86.72l-25.86-20.37c-28.48 26.28-52.87 57.25-70.93 92.5a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448a311.25 311.25 0 0 0 130.12-28.43l-29.25-23C389.06 408.84 355.15 416 320 416z" style="fill: white"></path>
                    </svg>
                </div>
            </button>
        </div>
    </div>
</div>

回答by Sicha

Basically you can do

基本上你可以做到

input { -webkit-text-security: disc; }

input { -webkit-text-security: disc; }

inside your css file.

在你的 css 文件中。

But caution, someone could simply "inspect element" in Chrome and change the css element from "disc" to "none" and real text would be seen clear as day.

但请注意，有人可以简单地在 Chrome 中“检查元素”并将 css 元素从“disc”更改为“none”，真实文本将被视为清晰可见。

As for disabling select/copy refer to this post: How to disable text selection highlighting using CSS?

至于禁用选择/复制，请参阅这篇文章： 如何使用 CSS 禁用文本选择突出显示？

回答by aniruddha

If you want to prevent copy paste functionality then you can use:

如果要防止复制粘贴功能，则可以使用：

-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none;

-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none;

which will not let others select the text and so they will not be able to copy.

这不会让其他人选择文本，因此他们将无法复制。