Javascriptで範囲選択禁止

Sponsored Link


動作概要


Javascriptでの画像とテキストの範囲選択禁止スクリプトです。

<!-- 画像とテキストの範囲選択禁止(Javascript)
CSS3版がなくてもこれだけで画像とテキストの選択禁止が可能
================================================== -->
<script language="Javascript">
    /*<![CDATA[*/
    document.onselectstart = function(){return false;};
    /*]]>*/
</script>

BODYタグに書く場合は以下のようになります。

<body onselectstart="return false">

CSSでも同様のことができます。

<!-- 画像とテキストの範囲選択禁止(CSS3)
================================================== -->
<style type="text/css">
<!--
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none; /* Safari、Old Chrome */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10 */
        user-select: none;
    }
-->
</style>

しかし、上記の方法だと、INPUTフォームにも適用されてしまいます。そこで、次のようにクリック場所を検出して範囲選択させるかさせないかと判断した上で禁止する方法にしなければなりません。

マウスボタンクリック場所のtagを取得、tagによってcopy、cut、select、pasteを制御する例


最初のスクリプトだと、テキストフォームやソースコードの範囲選択も不許可にしてしまいます。そこで、マウスボタンクリック場所のtagを取得して、tagによってcopy、cut、select、pasteを制御する例を紹介します。

// マウスボタンクリック場所のtagを取得、tagによってコピー、カット、セレクト、ペーストを制御する例
//
window.document.onmousedown = function(evt){
if (!evt) {
var eType = event.srcElement.tagName; // IE8以下はeventオブジェクトのsrcElementプロパティにイベントが発生した場所のタグ情報が格納
console.log('IE');
} else {
var eType = evt.target.tagName; // それ以外はイベントオブジェクトのtargetプロパティにイベントが発生した場所のタグ情報が格納
console.log('IE以外');
}
//console.log(evt);
//console.log(eType);
eType = eType.toLowerCase();
//console.log(eType);
//var text = "";
switch(eType) {
case "pre" : text = "pre";
document.oncopy = function(){return true;};
document.onselectstart = function(){return true;};
console.log('pre');
break;
case "code" : text = "code";
document.oncopy = function(){return true;};
document.onselectstart = function(){return true;};
console.log('code');
break;
case "form" : text = "form";
document.oncopy = function(){return true;};
document.oncut = function(){return true;};
document.onselectstart = function(){return true;};
document.onpaste = function(){return true;};
console.log('form');
break;
case "input" : text = "input";
document.oncopy = function(){return true;};
document.oncut = function(){return true;};
document.onselectstart = function(){return true;};
document.onpaste = function(){return true;};
console.log('input');
break;
case "div" : text = "div"; // SyntaxHighlighterで全選択した時のみコピー解禁
document.oncopy = function(){return true;};
console.log('SyntaxHilighter');
break;
default : text = "指定外";
document.oncopy = function(){return false;};
document.oncut = function(){return false;};
document.onselectstart = function(){return false;};
document.onpaste = function(){return false;};
console.log('指定外');
break;
}
console.log(text);
}
Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。