Javascript, чтобы показать / скрыть границы ввода текста - PullRequest
Новая
       35

Javascript, чтобы показать / скрыть границы ввода текста

0 голосов
/ 12 июня 2019

Извините за очень простой / простой вопрос, я очень плохо знаком с интерфейсной веб-разработкой.

Я рассмотрел множество вопросов об использовании Javascript для отображения / скрытия объектов на веб-странице.но никто из них не говорит о том, чтобы конкретно показывать / скрывать границы ввода текста.

На моей странице есть текстовый ввод и кнопка.

Когда страница загружается, я не хочу, чтобы граница ввода текста была видимой.

Когда кнопка нажата, я хочу, чтобы она изменила состояние границы ввода текста (IE: еслиграница ввода текста не отображается при нажатии кнопки, тогда она вызывает функцию 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>

Когда нажата кнопка, видимых изменений границы ввода текста или страницы в целом по этому вопросу не происходит.

Любое направление будет высоко цениться, я обязательно буду признателен за любую помощь и пометить наиболее подходящий ответ как принятый.Заранее спасибо.

Ответы [ 4 ]

2 голосов
/ 12 июня 2019

попробуйте это: 

<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 - это в основном массив с несколькими специальными функциями: Документы списка классов
  • , вызывающие переключение классаlist удаляет класс, если он присутствует, и добавляет его, если он отсутствует
  • Нижний класс CSS .question-text-border переопределяет класс .question-text

Дайте мне знать, если есть что-то, что мне нужно уточнить.

2 голосов
/ 12 июня 2019

Граница требует трех частей.Размер, определяемый практически чем угодно, например, 2 пикселя, тип линии, такой как пунктирная или сплошная, и цвет, такой как mediumspringgreen (лучший зеленый).Итак, чтобы правильно использовать свойство border, вам нужно установить границу в JavaScript, используя три вышеупомянутых свойства.Вместо myInput.borderStyle="solid"; вы должны использовать myInput.borderStyle="1px solid crimson"; или любое другое значение, которое вы хотите использовать.

1 голос
/ 12 июня 2019

Вам нужно установить границу стиля 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()">
1 голос
/ 12 июня 2019

Вам также нужно указать его размер .. Просто добавьте это ..

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

...