Ответы пользователя по тегу HTML
  • Почему не работает pattern на input?

    @alekssamos
    Программист любитель
    UPD: возможно, вы ищете input masc? Когда допустим надо ввести номер телефона, в поле ввода маска
    +7 (___) ___-__-__
    И она заполняется цифрами при вводе?
    Тогда так в гугле и ищите: input masc js

    ___
    Я знаю, что вам нужно.
    Это, правда, jQuery, но, думаю, принцип понятен.
    $(document).on('change', 'input[pattern]', function() {
    	var re = new RegExp($(this).attr('pattern'), 'g');
    	var newVal = '';
    	for (i in m = $(this).val().match(re)) {
    		newVal += m[i];
    	}
    	$(this).val(newVal);
    });

    Пример работы здесь (где вход или регистрация).
    Ответ написан
  • Почему с iphone не работает Telegram Login Widget?

    @alekssamos
    Программист любитель
    Как вариант, у Safari есть настройки против отслеживания, конфиденциальность, чтобы рекламные трекеры не следили за пользователями.
    Так вот, возможно эти технологии блокируют передачу параметров в скрипт виджета.
    Ответ написан
    Комментировать
  • Не силён в JS, как реализовать группу из input type="radio"?

    @alekssamos
    Программист любитель
    Так и должно быть. id должен быть уникальным.
    Вы вручную что ли пишете разметку? Если бы это выводилось, например, из PHP, то никаких трудностей с уникальным id бы не было.
    Ответ написан
  • Как сменить цвет темы gist и добавить кнопку копировать?

    @alekssamos
    Программист любитель
    How to add the "Copy" button to code blocks
    Adding "Copy" (to Clipboard) Button

    If you would like to add a button to your fenced code blocks so that users may copy the code, you can do so in Docusaurus. You will have to add some code to your Docusaurus project, as seen below.

    Under static/js, create a file called code-block-buttons.js with the following:

    // Turn off ESLint for this file because it's sent down to users as-is.
    /* eslint-disable */
    window.addEventListener('load', function() {
      function button(label, ariaLabel, icon, className) {
        const btn = document.createElement('button');
        btn.classList.add('btnIcon', className);
        btn.setAttribute('type', 'button');
        btn.setAttribute('aria-label', ariaLabel);
        btn.innerHTML =
          '<div class="btnIcon__body">' +
          icon +
          '<strong class="btnIcon__label">' +
          label +
          '</strong>' +
          '</div>';
        return btn;
      }
    
      function addButtons(codeBlockSelector, btn) {
        document.querySelectorAll(codeBlockSelector).forEach(function(code) {
          code.parentNode.appendChild(btn.cloneNode(true));
        });
      }
    
      const copyIcon =
        '<svg width="12" height="12" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';
    
      addButtons(
        '.hljs',
        button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard'),
      );
    
      const clipboard = new ClipboardJS('.btnClipboard', {
        target: function(trigger) {
          return trigger.parentNode.querySelector('code');
        },
      });
    
      clipboard.on('success', function(event) {
        event.clearSelection();
        const textEl = event.trigger.querySelector('.btnIcon__label');
        textEl.textContent = 'Copied';
        setTimeout(function() {
          textEl.textContent = 'Copy';
        }, 2000);
      });
    });


    Under static/css, create a file called code-block-buttons.css and add the following:

    ```css
    /* "Copy" code block button */
    pre {
      position: relative;
    }
    
    pre .btnIcon {
      position: absolute;
      top: 4px;
      z-index: 2;
      cursor: pointer;
      border: 1px solid transparent;
      padding: 0;
      color: #fff;
      background-color: transparent;
      height: 30px;
      transition: all .25s ease-out;
    }
    
    pre .btnIcon:hover {
      text-decoration: none;
    }
    
    .btnIcon__body {
      align-items: center;
      display: flex;
    }
    
    .btnIcon svg {
      fill: currentColor;
      margin-right: .4em;
    }
    
    .btnIcon__label {
      font-size: 11px;
    }
    
    .btnClipboard {
      right: 10px;
    }


    Add the following to siteConfig.js:

    scripts: [
      'https://buttons.github.io/buttons.js',
      'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
      '/js/code-block-buttons.js',
    ],
    stylesheets: ['/css/code-block-buttons.css']
    ```


    Your "Copy" to clipboard buttons should now appear at the upper right of every fenced code block.
    Ответ написан
    2 комментария
  • Как сделать гиперссылку через условие?

    @alekssamos
    Программист любитель
    function Access(){
    event.preventDefault();

    Либо так: <a href="" onclick="Access(); return false;">
    Ответ написан
  • Как взаимодействовать с элементом ::after?

    @alekssamos
    Программист любитель
    Заходим сюда
    /bitrix/cache/css/s1/redisigne/page_3ac9c0442a118ab1ae197b277795c9a4/page_3ac9c0442a118ab1ae197b277795c9a4_v1.css

    И находим строку:
    .district__item .item__address--ninetoten::after {
        content: '9:00 - 22:00';
        font-weight: 300;
        font-size: 12px;
        line-height: 14px;
        color: var(--pink);
        padding-left: 5px;
    }


    Вот и ответ. Время в CSS, а не в HTML коде.
    Ответ написан
    1 комментарий
  • Не открывается всплывающее окно оплаты в чём может быть ошибка?

    @alekssamos
    Программист любитель
    А почему бы не использовать обычный location? Обязательно надо в новой вкладке?
    А что, если...
    function myopen(u) {
    	var a = document.createElement("a");
    	a.target = "_blank";
    	a.href = u;
    	a.click();
    }

    <button onclick="myopen('https://example.com/pay');">Перейти к оплате</button>

    Сейчас проверим.
    Запустить!
    Да, работает.
    Ответ написан
  • Как сделать фото с камеры HTML js?

    @alekssamos
    Программист любитель
    Короткий ответ: создаёшь video, прикручиваешь трансляцию с камеры, в нужный момент создаёшь canvas, рисуешь кадр с video на нём и этот кадр забираешь.

    В HTML создаешь <video></video>
    в JS пишешь

    var videoElement = document.querySelector('video');
    getStream().then(getDevices).then(gotDevices);
    
    function getDevices() {
        // AFAICT in Safari this only gets default devices until gUM is called :/
        return navigator.mediaDevices.enumerateDevices();
    }
    
    function gotDevices(deviceInfos) {
        window.deviceInfos = deviceInfos; // make available to console
        console.log('Available input and output devices:', deviceInfos);
    }
    window.setTimeout(getStream, 10);
    }
    
    function getStream() {
        if (window.stream) {
            window.stream.getTracks().forEach(track => {
                track.stop();
            });
        }
        const videoSource = videoSelect.value;
        const constraints = {
            video: {
                deviceId: videoSource ? {
                    exact: videoSource
                } : undefined
            }
        };
        return navigator.mediaDevices.getUserMedia(constraints).
        then(gotStream).catch(handleError);
    }
    
    function gotStream(stream) {
        window.stream = stream; // make stream available to console
        if ('srcObject' in videoElement) {
            videoElement.srcObject = stream;
        } else {
            videoElement.src = URL.createObjectURL(stream);
        }
    }
    
    function handleError(error) {
        console.error('Error: ', error);
    }
    
    function getImgUrl() {
        let el = videoElement;
        let canvas = document.createElement('canvas');
        canvas.width = el.videoWidth;
        canvas.height = el.videoHeight;
        canvas.style.display = 'none';
        document.body.appendChild(canvas);
        canvas.getContext('2d').drawImage(el, 0, 0, canvas.width, canvas.height);
        let cu = canvas.toDataURL();
        document.body.removeChild(canvas);
        return cu;
    }

    Ну и всё, getImgUrl() вызываешь в нужный момент и получаешь строку вида data:image/jpeg;base64,...... и вот тебе картинка
    Ответ написан
    Комментировать
  • Почему при запуске файла php выходит ошибка Cannot POST /files/mailer.php?

    @alekssamos
    Программист любитель
    nodejs sendmail
    Попробуйте. Возможно PHP и не понадобится даже.
    Ответ написан
  • Как сделать задержку перед редериктом с полной загрузкой страницы?

    @alekssamos
    Программист любитель
    Тебе нужен Javascript.
    PHP выполняется на сервере,
    ещё до того, как клиент получит страницу.
    Соответственно делаем так:
    <script>
    window.setTimeout(function(){
        window.location.href = "https://example.com/?" + window.location.search.substring(1);
    }, 3000);

    </script>
    Ответ написан
    3 комментария
  • Можно ли как-то через бота js поставить подключение к сайту?

    @alekssamos
    Программист любитель
    Судя по тегам это nodejs, тогда так:
    const { exec } = require("child_process");
    
    exec("filename.html");

    Если браузер, то смотри комментарий к вопросу.
    Ответ написан
    Комментировать
  • Как мне получить значение input и передать его в определенный блок во Vue?

    @alekssamos
    Программист любитель
    А, ну так это, как его,
    <input v-model="myval" placeholder="напиши значение">
    <p>Значение: {{ myval }}</p>

    А если разные страницы, тогда уже нужно хранилище
    Ответ написан
    Комментировать
  • Как воспроизвести звук в браузере?

    @alekssamos
    Программист любитель
    Раньше да, можно было автоматически воспроизводить, теперь же разработчики браузера убрали эту возможность. Только если по клику.
    Ответ написан
    Комментировать
  • Как мультибраузерно отображать видео из сервера на HTML странице?

    @alekssamos
    Программист любитель
    ffmpeg на сервер установи и храни только MP4. Сейчас разные форматы уже не актуальны, а устаревшие браузеры , как и flash, давно не поддерживаются.
    На 2013 год это да, был бы актуальный вопрос. Сейчас - нет.
    Ответ написан
    Комментировать
  • Почему когда заходишь на сайт, обратная связь сразу отправляет сообщение?

    @alekssamos
    Программист любитель
    <?php
    if ($_SERVER['REQUEST_METHOD'] == "POST") {
        header('Content-type: text/plain; charset=utf-8');
        $to = "damirgaliev587@gmail.com"; 
        $tema = "Форма обратной связи на PHP"; 
        $message = "Ваше имя: ".htmlspecialchars($_POST['name'])."<br>";
          $message .= "E-mail: ".htmlspecialchars($_POST['email'])."<br>"; 
        $message .= "Номер телефона: ".htmlspecialchars($_POST['phone'])."<br>"; 
        $message .= "Сообщение: ".htmlspecialchars($_POST['message'])."<br>"; 
        $headers  = 'MIME-Version: 1.0' . "\r\n"; 
          $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; 
        mail($to, $tema, $message, $headers); 
    }
    header('Location: index.html');
    ?>
    Ответ написан
    Комментировать
  • Как сделать отправку текста по кнопке (input)?

    @alekssamos
    Программист любитель
    Братан, type="hidden" сделай.
    <form id="input" name="data" action="" method="post">
    <input id="content" type="hidden" name="content" maxlength="300"  value="привет" />				
    <button id="submit" type="submit" ><i class="fa fa-paper-plane"></i></button>
    </form>
    Ответ написан
    Комментировать
  • Возможно ли сохранять состояние html файла?

    @alekssamos
    Программист любитель
    Учите localStorage или смотрите, как можно работать с Cookies через JS
    Ответ написан
    Комментировать
  • Как загружать файл index.php/html изначально с тэгом и возможно ли это?

    @alekssamos
    Программист любитель
    <script>
    if (document.location.hash != "#tab_1") document.location.hash = "#tab_1";

    </script>
    Ответ написан
    Комментировать
  • Как установить Базовый код html в notepad++?

    @alekssamos
    Программист любитель
    Вариант 1. Поискать специальный плагин, типа
    https://github.com/ffes/nppsnippets

    Вариант 2. Использовать стандартные шаблоны Windows.
    1. Пройти по пути: C:\Windows\ShellNew\ И создать файл Template.html с нужным содержимым.
    2. В редакторе реестра (regedit) пройти по пути HKEY_CLASSES_ROOT\.html\ и создать раздел ShellNew с параметром FileName и его значением Template.html

    И по идее, если создавать новый файл через контекстное меню проводника (explorer) новый файл должен создаваться с содержимым из того файла.
    Ответ написан
    Комментировать
  • Как сделать форму для API VK метод message.send?

    @alekssamos
    Программист любитель
    <form action="https://api.vk.com/method/messages.send" method="GET" target="frameresult">
    <input type="hidden" name="chat_id" value="2">
    <input type="hidden" name="v" value="5.80">
    <input type="hidden" name="access_token" value="ТОКЕН ГРУППЫ">
    <label for="message">Сообщение:</label><br>
    <textarea name="message" id="message" style="max-width:300px; max-height:200px;"></textarea>
    <div style="text-align:center;">
    <button type="submit">Отправить</button>
    </div>
    </form>
    <iframe name="frameresult"></iframe>
    Ответ написан
    3 комментария