Как сделать так, чтобы значение пользовательского флажка CSS распознавалось в Edge? - PullRequest
Новая
       17

Как сделать так, чтобы значение пользовательского флажка CSS распознавалось в Edge?

0 голосов
/ 30 мая 2019

Я нашел способ сделать хороший флажок настройки с помощью CSS на W3Schools здесь .

Теперь на своем сайте я сохраняю их значение в LocalStorage и извлекаю его, и у меня уже установлен флажок, когда пользователь возвращается на сайт. Это прекрасно работает в Chrome, но я только что понял, что это не работает в Edge. После тестирования разных вещей кажется, что Edge не может прочитать значение пользовательских блоков (вероятно, потому что настоящие флажки скрыты). Кроме того, когда я пытаюсь установить проверку с помощью javascript, она этого не делает.

См. Мой код ниже. 

    function storeValues(lbl,answ)  
    {
      localStorage.setItem(lbl, answ);  
      return true;
    }
    
    const choices = localStorage.getItem('Ch2 myChoice1');
    switch (choices) {
    	case "Yes":
    		document.getElementById('Q1Answ1').checked = true;	
    		break;
    	case "No":
    		document.getElementById('Q1Answ2').checked = true;
    }
    /* Customize the label (the container) */
    .validationLabel {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    
    /* Hide the browser's default radio button */
    .validationLabel input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    
    /* Create a custom radio button */
    .blueradio {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #eee;
      border: thin solid black;
      border-radius: 50%;
    }
    
    /* On mouse-over, add a grey background color */
    .validationLabel:hover input ~ .blueradio {
      background-color: #fff;
      border: none;
      box-shadow: 0 0 5px 2px blue;
    }
    
    /* When the radio button is checked, add a blue background */
    .validationLabel input:checked ~ .blueradio {
      background-color: #292A5E;
    }
    
    /* Create the indicator (the dot/circle - hidden when not checked) */
    .blueradio:after {
      content: "";
      position: absolute;
      display: none;
    }
    
    /* Show the indicator (dot/circle) when checked */
    .validationLabel input:checked ~ .blueradio:after {
      display: block;
    }
    
    /* Style the indicator (dot/circle) */
    .validationLabel .blueradio:after {
      top: 6px;
      left: 6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
    }
    <form name="form2">
    <label class="validationLabel">Yes
      <input id="Q1Answ1" type="radio" name="Q1Answ" value="Yes">
      <span class="blueradio"></span>
    </label>
    
    <label class="validationLabel">No
      <input id="Q1Answ2" type="radio" name="Q1Answ" value="No">
      <span class="blueradio"></span>
    </label>			  
    <br>
    
    
    <a class="send_button" onClick="storeValues('Ch2 myChoice1', document.form2.Q1Answ.value);">Send</a>			   
    </form>

То, что должно произойти (и это работает в Chrome), происходит при первом посещении, пользователь делает выбор, нажимая радиокнопку ДА или НЕТ. Когда он позже возвращается, либо ДА, либо НЕТ уже проверено, в зависимости от того, что он выбрал в первый раз.

Есть ли способ исправить это, чтобы он работал во всех современных браузерах? Спасибо за вашу помощь, и извините, если я не ясен, или если я не написал это должным образом, я впервые обращаюсь за помощью на этом сайте.

ОБНОВЛЕНИЕ: эта проблема возникает даже на удаленном веб-сервере. Я не тестирую сайт локально.

Кроме того, я не знаю, связано ли это, но консоль Edge выдает мне эту ошибку: 

SCRIPT7002: XMLHttpRequest: Network Error 0x80700013, http://download.microsoft.com/download/B/9/F/B9FF9327-7A72-4165-BF91-9B7EEB6C579B/DeviceList.json

Почему-то я не думаю, что это связано с тем, что ссылка на скачивание связана с эмуляцией сотового телефона ...

Я загрузил вышеуказанный код здесь :

Когда я делаю выделение в Edge и нажимаю кнопку, а затем проверяю localStorage (F12), он не определен.

UPDATE: Отправка строки в localStorage работает, когда я использую событие onClick для кнопки ввода следующим образом: 

<label class="validationLabel">Yes
  <input id="Q1Answ1" type="radio" name="Q1Answ" value="Yes"  onClick="storeValues('Ch2 myChoice1', 'YES')">
  <span class="blueradio"></span>
</label>

<label class="validationLabel">No
  <input id="Q1Answ2" type="radio" name="Q1Answ" value="No" onClick="storeValues('Ch2 myChoice1', 'NO')">
  <span class="blueradio"></span>
</label>

Но я все еще не могу заставить Edge установить переключатель в положение CHECKED, считываемое из localStorage. Я знаю, что он читает это, потому что, когда я добавляю оповещение («выбор») в мой код swtich, это работает.

...