Javascript 到 show/hide 文本输入框

Question

抱歉提出真正 basic/simple 的问题，我对前端 Web 开发还很陌生。

我看了很多关于使用 Javascript 到 show/hide 网页上的东西的问题，但是 none 其中 none 专门讨论了 showing/hiding 文本输入边框。

在我的页面上，我有一个文本输入框和一个按钮。

当页面加载时，我不希望文本输入边框可见。

单击按钮时，我希望它更改文本输入边框的状态（即：如果单击按钮时文本输入边框未显示，则它会调用 javascript 函数来使文本输入边框可见。如果文本输入边框可见，那么按钮调用的 javascript 函数将使文本输入边框不可见。）

到目前为止，这是我的代码：

<html>
    <head>
        <title>Text Input Border test</title>
    </head>
    <body>
        <br>
        <input type="text" id="address1" value="test text input" class="question-text" size=30> 
        <br>
        <input type="button" value="Click me" onclick="showBorder()">
    </body>
    <script type="text/javascript">
        function showBorder () {
            var myInput = document.getElementById("address1").style;
            myInput.borderStyle="solid";
        }
    </script>
    <style scoped lang="scss">
        .question-text {
            border: 0;
        }
    </style>
</html>

单击该按钮时，文本输入边框或一般页面没有明显的变化。

任何方向都将不胜感激，我一定会投票给任何帮助并将最适用的答案标记为已接受。提前致谢。

Answer 1

你也需要给它一个尺寸.. 只需添加这个..

myInput.borderStyle="solid"； myInput.borderWidth= '1px'

Answer 2

您需要设置样式边框 none，检查边框是否为空，然后使用 .style.border 将边框设置为您想要的边框：

//
var myInput = document.getElementById("address1");
//
function showBorder() {
  if (myInput.style.border == "") {
    myInput.style.border = "1px solid black";
  } else {
    myInput.style.border = "";
  }
}

.question-text {
  border: none;
}

<input type="text" id="address1" value="test text input" class="question-text" size=30>
<br>
<input type="button" value="Click me" onclick="showBorder()">

Answer 3

Border 需要三个部分。大小，几乎可以定义为任何值，即 2px，线条类型，例如点线或实线，以及颜色，例如 mediumspringgreen（最好的绿色）。因此，为了正确使用边框属性，您需要使用上述三个属性在 JavaScript 中设置边框。您应该使用 myInput.borderStyle="1px solid crimson"; 或您希望使用的任何其他值，而不是 myInput.borderStyle="solid";。

Answer 4

试试这个：

<html>
    <head>
        <title>Text Input Border test</title>
    </head>
    <body>
        <br>
        <input type="text" id="address1" value="test text input" class="question-text" size=30> 
        <br>
        <input type="button" value="Click me" onclick="toggleBorder()">
    </body>
    <script type="text/javascript">
        function toggleBorder () {
            var myInput = document.getElementById("address1");
            myInput.classList.toggle('question-text-border');
        }
    </script>
    <style scoped lang="scss">
        .question-text {
            border: 0;
        }
        .question-text-border {
            border: 1px solid black;
        }
    </style>
</html>

classList 基本上是一个具有一些特殊功能的数组：Class List Docs
在 class 列表上调用切换会删除 class（如果存在）并添加（如果不存在）
下面cssclass.question-text-border覆盖class.question-text

如果有什么需要澄清的，请告诉我。

Javascript 到 show/hide 文本输入框

Javascript to show/hide text input border

html

javascript

border

textinput