Problema com JS

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição

Bom, segundo o JS passado pelo @Luiz~ neste tópico: https://ajuda.forumeiros.com/t108877-bloquear-copias-nos-topicos

Ele me trouxe uns pequenos problemas, as vezes na hora de escrever em algum título de tópico, ou mandar mensagem privada ou algo do gênero que envolva escrita, ele simplesmente buga e não consigo escrever, mesmo eu clicando no mouse lá toda hora. Um jeito que descobri de resolver e ficar com mouse clicado e lá e ir digitando que funciona, mas creio eu que os usuários não merecem esse trabalho, correto ?

Espero que possam me ajudar nisso.

Olá,

Bom, esse problema é universal.
Não há para bloquear o botão direito do mouse sem enfrentarmos tal problema.
O senhor terá que escolher entre bloquear o clique direito ou a experiência dos usuários.

o/

Luiz~ escreveu:Olá,

Bom, esse problema é universal.
Não há para bloquear o botão direito do mouse sem enfrentarmos tal problema.
O senhor terá que escolher entre bloquear o clique direito ou a experiência dos usuários.

o/

Não há como fazer algo como isso no botão direito: https://i.imgur.com/nalJMQh.png ?

http://rotacomandosamp.weebly.com/puniccedilotildees-disciplinares.html

Aí onde eu vi

----------
Edit:

Testei em outro fórum, com botão direito permitido e deu a mesma coisa, apenas com o Primeiro JS do tópico que o senhor passou sobre não copiar.

Veja nesse fórum : http://17bpm.forumeiros.com/post?f=3&mode=newtopic

Olá,

Me desculpe, havia confundido as coisas.
O script para proibir a seleção de texto, o senhor investiu em todas as páginas, correto? Sim, logo, ele afeta a seleção de texto e o evento de cópia no SCEditor, o que acaba por prejudicar tudo.

Por isso, que não costumo recomendar, e até ir contra o uso desses scripts.

o/

Luiz~ escreveu:Olá,

Me desculpe, havia confundido as coisas.
O script para proibir a seleção de texto, o senhor investiu em todas as páginas, correto? Sim, logo, ele afeta a seleção de texto e o evento de cópia no SCEditor, o que acaba por prejudicar tudo.

Por isso, que não costumo recomendar, e até ir contra o uso desses scripts.

o/

Não há como fazer algo contra isso ?

Troque por:

Código:

/**
 * Bloqueio de seleção de texto no fórum e alerta para avisos.
 * @author: Luiz~
 * @author: Kyo Panda
 * @see: <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
 * @licence: MIT
 */
(function ($) {
  'use strict';
 
  /**
  * Edite abaixo o título e o texto de sua alerta. (HTML É PERMITIDO!)
  */
  var alertConfig = {
    'title': 'ATENÇÃO!',
    'text': 'Olá, <br>Lamentamos, mas a cópia de conteúdo neste fórum <strong>não é permitida</strong>.<br>Recomendamos a leitura de nossas <a href="regras_URL">regras</a> para saber mais.',
  };
 
  var styles = [
    '',
    '.alert-wrap {',
    '  position: fixed;',
    '  top: 100px;',
    '  width: 40%;',
    '  background-color: rgb(255, 223, 218);',
    '  border: solid 3px #E9553C;',
    '  background-image: url(https://i39.servimg.com/u/f39/15/88/72/83/warnin10.png);',
    '  background-repeat: no-repeat;',
    '  background-position: 15px center;',
    '  padding: 23px;',
    '  padding-left: 120px;',
    '  font-size: 13px!important;',
    '  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;',
    '  left: 50%;',
    '  transform: translateX(-50%);',
    '  z-index: 99999;',
    '  border-radius: 5px;',
    '}',
    '',
    '.alert-wrap a {',
    '  color: #de5038;',
    '  border-bottom: solid 1px #e9553c;',
    '  transition: all ease-in 150ms;',
    '}',
    '',
    '.alert-wrap strong, .alert-wrap b {',
    '  color: #e9553c;',
    '}',
    '',
    '.alert-wrap a:hover {',
    '  color: #fff;',
    '  box-shadow: inset 0px -20px #e9553c;',
    '}',
    '',
    '.alert-wrap h1 {',
    '  border: solid 0px transparent;',
    '  color: #e9553c;',
    '  font-weight: bold;',
    '  font-size: 15px!important;',
    '}',
    '',
    'div.alert-wrap span.close-alert {',
    '  position: absolute;',
    '  right: 8px;',
    '  top: 5px;',
    '  font-weight: bold;',
    '  font-size: 14px;',
    '  color: #e9573b;',
    '}',
    '',
    'div.alert-wrap span.close-alert:hover {',
    '  text-decoration: underline;',
    '  cursor: pointer;',
    '}',
    '',
  ].join('\n');
 
  $(function () {
      
      if ($('.sceditor-container').length) {
         return;
      }
 
    // Place the styles on <head>:
    $('<style>', {
      text: styles
    }).appendTo('head');
 
    // Alert:
    $([
      '<div class="alert-wrap">',
      '  <span class="close-alert">x</span>',
      '  <div class="content">',
      '    <h1>' + alertConfig.title + '</h1>',
      '    ' + alertConfig.text,
      '  </div>',
      '</div>',
    ].join('\n'))
      .hide()
      .appendTo('body')
    ;
 
  $(document).on('copy', function(event) {
      event.preventDefault();
  });
 
    // Select Event:
    $(document).on('mouseup', function() {
      var selection;
     
      if (document.selection) {
        selection = document.selection.createRange().text;
      } else if (window.getSelection) {
        selection = window.getSelection().toString();
      } else {
        return;
      }
     
      if (selection) {
        $('.alert-wrap').show();
      }
     
      if (document.selection) {
        document.selection.clear();
        return;
      }
     
      window.getSelection().empty();
  });
 
    // Close alert function:
    $('.close-alert')
      .on('click', function () {
        $('.alert-wrap').hide();
      })
    ;
  });
 
  $(function () {
    $('body').on('contextmenu', function () {
      return false;
    });
  });
}(jQuery));

o/

Problema ainda persiste...

Olá,

Você pode recorrer à bloquear o botão direito do mouse e os botões Ctrl + C e Ctrl + V. Utilize este código:

Código:

jQuery(document).ready(function(){ var message='Proibido copiar!'
   jQuery('body').mousedown(function(e){
       if( e.button == 2 ) {alert(message);}
      
   });
     $('body').keydown(function(event) {
        if (event.ctrlKey==true && (event.which == '67' || event.which == '86')) {
            alert(message);
            event.preventDefault();
        }
    });
});

Porém, vai ser impossível copiar e usar essas teclas nos inputs e campos de texto, pois o código atribui essa função a todos os elementos.

Abraços.

Vamos fazer mais simples:
Troque por:

Código:

(function ($) {
  'use strict';
 
  $(function () {
    $(document).on('copy', function(event) {
      alert('Cópia negada!');
      event.preventDefault();
    });
   
    $('body').on('contextmenu', function () {
      return false;
    });
  });
}(jQuery));

o/

Perfeito, funcionou ambos.
Agora dá para deixar o aviso do jeito que estava?

-----------------

Edit:

Se eu arrastar e colocar em outro lugar funciona perfeitamente, veja : https://imgur.com/a/EtCWA

Olá,

Troque o JS por este:

Código:

(function ($) {
  'use strict';

  /**
  * Edite abaixo o título e o texto de sua alerta. (HTML É PERMITIDO!)
  */
  var alertConfig = {
    'title': 'ATENÇÃO!',
    'text': 'Olá, <br>Lamentamos, mas a cópia de conteúdo neste fórum <strong>não é permitida</strong>.<br>Recomendamos a leitura de nossas <a href="regras_URL">regras</a> para saber mais.',
  };
 
  var alertstyles = [
    '',
    '.alert-wrap {',
    '  position: fixed;',
    '  top: 100px;',
    '  width: 40%;',
    '  background-color: rgb(255, 223, 218);',
    '  border: solid 3px #E9553C;',
    '  background-image: url(https://i39.servimg.com/u/f39/15/88/72/83/warnin10.png);',
    '  background-repeat: no-repeat;',
    '  background-position: 15px center;',
    '  padding: 23px;',
    '  padding-left: 120px;',
    '  font-size: 13px!important;',
    '  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;',
    '  left: 50%;',
    '  transform: translateX(-50%);',
    '  z-index: 99999;',
    '  border-radius: 5px;',
    '}',
    '',
    '.alert-wrap a {',
    '  color: #de5038;',
    '  border-bottom: solid 1px #e9553c;',
    '  transition: all ease-in 150ms;',
    '}',
    '',
    '.alert-wrap strong, .alert-wrap b {',
    '  color: #e9553c;',
    '}',
    '',
    '.alert-wrap a:hover {',
    '  color: #fff;',
    '  box-shadow: inset 0px -20px #e9553c;',
    '}',
    '',
    '.alert-wrap h1 {',
    '  border: solid 0px transparent;',
    '  color: #e9553c;',
    '  font-weight: bold;',
    '  font-size: 15px!important;',
    '}',
    '',
    'div.alert-wrap span.close-alert {',
    '  position: absolute;',
    '  right: 8px;',
    '  top: 5px;',
    '  font-weight: bold;',
    '  font-size: 14px;',
    '  color: #e9573b;',
    '}',
    '',
    'div.alert-wrap span.close-alert:hover {',
    '  text-decoration: underline;',
    '  cursor: pointer;',
    '}',
    '',
  ].join('\n');
 
  $(function () {
    $('<style>', {
      text: alertstyles
    }).appendTo('head');

    $([
      '<div class="alert-wrap">',
      '  <span class="close-alert">x</span>',
      '  <div class="content">',
      '    <h1>' + alertConfig.title + '</h1>',
      '    ' + alertConfig.text,
      '  </div>',
      '</div>',
    ].join('\n'))
      .hide()
      .appendTo('body')
    ;

    $(document).on('copy', function(event) {
      event.preventDefault();
      $('.alert-wrap').show();
    });
   
    $('body').on('contextmenu', function (event) {
      event.preventDefault();
      $('.alert-wrap').show();
    });

    $('.close-alert')
      .on('click', function () {
        $('.alert-wrap').hide();
      })
    ;
  });
}(jQuery));

Para proibir a seleção do texto, e consequentemente, que algo seja arrastado, use este CSS:

Código:

* {
  user-select: none!important;
}

E coloque-o em sua CSS.

o/

------------------
Edit:
Fora editado um problema no código JS, a fim de retirá-lo.
------------------

Perfeito!
Só uma coisa... Daria pra adicionar esse JS agora com por exemplo, membros que tem o painel do fórum não precisam dele?

Tipo, eu gostaria de que os membros não pudessem copiar nada e tals, apenas os administradores, inclusive usar ferramenta do desenvolvedor

Seria possível ?

Troque por:

Código:

(function ($) {
  'use strict';

  /**
  * Edite abaixo o título e o texto de sua alerta. (HTML É PERMITIDO!)
  */
  var alertConfig = {
    'title': 'ATENÇÃO!',
    'text': 'Olá, <br>Lamentamos, mas a cópia de conteúdo neste fórum <strong>não é permitida</strong>.<br>Recomendamos a leitura de nossas <a href="regras_URL">regras</a> para saber mais.',
  };
 
  var alertstyles = [
    '',
    '.alert-wrap {',
    '  position: fixed;',
    '  top: 100px;',
    '  width: 40%;',
    '  background-color: rgb(255, 223, 218);',
    '  border: solid 3px #E9553C;',
    '  background-image: url(https://i39.servimg.com/u/f39/15/88/72/83/warnin10.png);',
    '  background-repeat: no-repeat;',
    '  background-position: 15px center;',
    '  padding: 23px;',
    '  padding-left: 120px;',
    '  font-size: 13px!important;',
    '  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;',
    '  left: 50%;',
    '  transform: translateX(-50%);',
    '  z-index: 99999;',
    '  border-radius: 5px;',
    '}',
    '',
    '.alert-wrap a {',
    '  color: #de5038;',
    '  border-bottom: solid 1px #e9553c;',
    '  transition: all ease-in 150ms;',
    '}',
    '',
    '.alert-wrap strong, .alert-wrap b {',
    '  color: #e9553c;',
    '}',
    '',
    '.alert-wrap a:hover {',
    '  color: #fff;',
    '  box-shadow: inset 0px -20px #e9553c;',
    '}',
    '',
    '.alert-wrap h1 {',
    '  border: solid 0px transparent;',
    '  color: #e9553c;',
    '  font-weight: bold;',
    '  font-size: 15px!important;',
    '}',
    '',
    'div.alert-wrap span.close-alert {',
    '  position: absolute;',
    '  right: 8px;',
    '  top: 5px;',
    '  font-weight: bold;',
    '  font-size: 14px;',
    '  color: #e9573b;',
    '}',
    '',
    'div.alert-wrap span.close-alert:hover {',
    '  text-decoration: underline;',
    '  cursor: pointer;',
    '}',
    '',
  ].join('\n');
 
  $(function () {

    if (_userdata.user_level !== 1) {
      return;
    }
   
    $('<style>', {
      text: alertstyles
    }).appendTo('head');

    $([
      '<div class="alert-wrap">',
      '  <span class="close-alert">x</span>',
      '  <div class="content">',
      '    <h1>' + alertConfig.title + '</h1>',
      '    ' + alertConfig.text,
      '  </div>',
      '</div>',
    ].join('\n'))
      .hide()
      .appendTo('body')
    ;

    $(document).on('copy', function(event) {
      event.preventDefault();
      $('.alert-wrap').show();
    });
   
    $('body').on('contextmenu', function (event) {
      event.preventDefault();
      $('.alert-wrap').show();
    });

    $('.close-alert')
      .on('click', function () {
        $('.alert-wrap').hide();
      })
    ;
  });
}(jQuery));

o/

Acho que o efeito foi inverso kkkkkkkkkkkkkkkkkkkkkk

Veja :
Sem painel : https://i.imgur.com/oYtk40c.png
Com painel : https://i.imgur.com/Lwr88x0.png

Realmente, usei o diferenciador, erroneamente.
Troque por:

Código:

(function ($) {
  'use strict';

  /**
  * Edite abaixo o título e o texto de sua alerta. (HTML É PERMITIDO!)
  */
  var alertConfig = {
    'title': 'ATENÇÃO!',
    'text': 'Olá, <br>Lamentamos, mas a cópia de conteúdo neste fórum <strong>não é permitida</strong>.<br>Recomendamos a leitura de nossas <a href="regras_URL">regras</a> para saber mais.',
  };
 
  var alertstyles = [
    '',
    '.alert-wrap {',
    '  position: fixed;',
    '  top: 100px;',
    '  width: 40%;',
    '  background-color: rgb(255, 223, 218);',
    '  border: solid 3px #E9553C;',
    '  background-image: url(https://i39.servimg.com/u/f39/15/88/72/83/warnin10.png);',
    '  background-repeat: no-repeat;',
    '  background-position: 15px center;',
    '  padding: 23px;',
    '  padding-left: 120px;',
    '  font-size: 13px!important;',
    '  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;',
    '  left: 50%;',
    '  transform: translateX(-50%);',
    '  z-index: 99999;',
    '  border-radius: 5px;',
    '}',
    '',
    '.alert-wrap a {',
    '  color: #de5038;',
    '  border-bottom: solid 1px #e9553c;',
    '  transition: all ease-in 150ms;',
    '}',
    '',
    '.alert-wrap strong, .alert-wrap b {',
    '  color: #e9553c;',
    '}',
    '',
    '.alert-wrap a:hover {',
    '  color: #fff;',
    '  box-shadow: inset 0px -20px #e9553c;',
    '}',
    '',
    '.alert-wrap h1 {',
    '  border: solid 0px transparent;',
    '  color: #e9553c;',
    '  font-weight: bold;',
    '  font-size: 15px!important;',
    '}',
    '',
    'div.alert-wrap span.close-alert {',
    '  position: absolute;',
    '  right: 8px;',
    '  top: 5px;',
    '  font-weight: bold;',
    '  font-size: 14px;',
    '  color: #e9573b;',
    '}',
    '',
    'div.alert-wrap span.close-alert:hover {',
    '  text-decoration: underline;',
    '  cursor: pointer;',
    '}',
    '',
  ].join('\n');
 
  $(function () {

    if (_userdata.user_level === 1) {
      return;
    }
   
    $('<style>', {
      text: alertstyles
    }).appendTo('head');

    $([
      '<div class="alert-wrap">',
      '  <span class="close-alert">x</span>',
      '  <div class="content">',
      '    <h1>' + alertConfig.title + '</h1>',
      '    ' + alertConfig.text,
      '  </div>',
      '</div>',
    ].join('\n'))
      .hide()
      .appendTo('body')
    ;

    $(document).on('copy', function(event) {
      event.preventDefault();
      $('.alert-wrap').show();
    });
   
    $('body').on('contextmenu', function (event) {
      event.preventDefault();
      $('.alert-wrap').show();
    });

    $('.close-alert')
      .on('click', function () {
        $('.alert-wrap').hide();
      })
    ;
  });
}(jQuery));

o/

Aew \o/ Perefect.
Dá pra fazer o mesmo no copiar? Só que desta vez poderia deixar liberado para moderadores e painel.
Seria possível ?

Tipo pq ta pelo CSS, aí excluiria do CSS e fazia em JS com o que eu pedi acima.

Sim, troque o código por:

Código:

(function ($) {
  'use strict';

  /**
  * Edite abaixo o título e o texto de sua alerta. (HTML É PERMITIDO!)
  */
  var alertConfig = {
    'title': 'ATENÇÃO!',
    'text': 'Olá, <br>Lamentamos, mas a cópia de conteúdo neste fórum <strong>não é permitida</strong>.<br>Recomendamos a leitura de nossas <a href="regras_URL">regras</a> para saber mais.',
  };
 
  var alertstyles = [
    '',
    '.alert-wrap {',
    '  position: fixed;',
    '  top: 100px;',
    '  width: 40%;',
    '  background-color: rgb(255, 223, 218);',
    '  border: solid 3px #E9553C;',
    '  background-image: url(https://i39.servimg.com/u/f39/15/88/72/83/warnin10.png);',
    '  background-repeat: no-repeat;',
    '  background-position: 15px center;',
    '  padding: 23px;',
    '  padding-left: 120px;',
    '  font-size: 13px!important;',
    '  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;',
    '  left: 50%;',
    '  transform: translateX(-50%);',
    '  z-index: 99999;',
    '  border-radius: 5px;',
    '}',
    '',
    '.alert-wrap a {',
    '  color: #de5038;',
    '  border-bottom: solid 1px #e9553c;',
    '  transition: all ease-in 150ms;',
    '}',
    '',
    '.alert-wrap strong, .alert-wrap b {',
    '  color: #e9553c;',
    '}',
    '',
    '.alert-wrap a:hover {',
    '  color: #fff;',
    '  box-shadow: inset 0px -20px #e9553c;',
    '}',
    '',
    '.alert-wrap h1 {',
    '  border: solid 0px transparent;',
    '  color: #e9553c;',
    '  font-weight: bold;',
    '  font-size: 15px!important;',
    '}',
    '',
    'div.alert-wrap span.close-alert {',
    '  position: absolute;',
    '  right: 8px;',
    '  top: 5px;',
    '  font-weight: bold;',
    '  font-size: 14px;',
    '  color: #e9573b;',
    '}',
    '',
    'div.alert-wrap span.close-alert:hover {',
    '  text-decoration: underline;',
    '  cursor: pointer;',
    '}',
    '',
    '* {',
    '  user-select: none!important;',
    '}',
    '',
  ].join('\n');
 
  $(function () {

    if (_userdata.user_level === 1) {
      return;
    }
   
    $('<style>', {
      text: alertstyles
    }).appendTo('head');

    $([
      '<div class="alert-wrap">',
      '  <span class="close-alert">x</span>',
      '  <div class="content">',
      '    <h1>' + alertConfig.title + '</h1>',
      '    ' + alertConfig.text,
      '  </div>',
      '</div>',
    ].join('\n'))
      .hide()
      .appendTo('body')
    ;

    $(document).on('copy', function(event) {
      event.preventDefault();
      $('.alert-wrap').show();
    });
   
    $('body').on('contextmenu', function (event) {
      event.preventDefault();
      $('.alert-wrap').show();
    });

    $('.close-alert')
      .on('click', function () {
        $('.alert-wrap').hide();
      })
    ;
  });
}(jQuery));

E remova o CSS passado anteriormente.

o/

Cara...

Perfeito!! <3
Tu é o melhor @Luiz~, valeu meu brodi

De nada, e obrigado.

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".