Mousetrackerで入力を行うことは可能ですか？

私は、カーソルに続くdivを希望します。しかし、divに入力する可能性があります。残念ながら私はdivがカーソルの後に来るだけで、カーソルはdivには入りません。Mousetrackerで入力を行うことは可能ですか？

または次のようなもの： divにカーソルがトラップされている可能性はありますか？彼が壊れたり入ったりするまで。カーソルが境界線に移動すると、divは適切な方向に移動する必要があります。（close関数は、現在のコードに存在しないが、私は自分自身ことを解決することができます。）

var MicrosoftModel=0; 
 
var xplus=10,yplus=10; 
 
var runnerobject; 
 

 
          
 
function MouseAction(mausx,mausy) 
 
{ 
 
    
 
    runnerobject.left=mausx+xplus; 
 
    runnerobject.top=mausy+yplus; 
 
} 
 

 
function MouseMove(event) 
 
{ 
 
    
 
    var mausx,mausy; 
 
    if (typeof(event)!="object")    
 
    return; 
 
    if (MicrosoftModel)      
 
    { 
 
     document.getElementById("runner").style.display = "none!important"; 
 
    mausx=event.clientX; 
 
    mausy=event.clientY; 
 
    if (document.body.scrollLeft) 
 
     mausx+=document.body.scrollLeft; 
 
    if (document.body.scrollTop) 
 
     mausy+=document.body.scrollTop; 
 
    } 
 
    else          
 
    { 
 
    mausx=event.pageX; 
 
    mausy=event.pageY; 
 
    } 
 
    MouseAction(mausx,mausy); 
 
} 
 

 
      
 
function MouseInit() 
 
{ 
 
    document.getElementById("runner").style.display = "none!important"; 
 
    if (document.all)   
 
    { 
 
    MicrosoftModel=1; 
 
    window.onmousemove=MouseMove; 
 
    runnerobject=document.all.runner.style; 
 
    } 
 
    if (!(MicrosoftModel))     
 
    { 
 
    if (typeof(document.addEventListener)=="function") 
 
              
 
    { 
 
     document.addEventListener("mousemove",MouseMove,true); 
 
     runnerobject=document.getElementById("runner").style; 
 
    } 
 
    else 
 
    if (document.runner)     
 
    { 
 
     window.captureEvents(Event.MOUSEMOVE); 
 
     window.onmousemove=MouseMove; 
 
     runnerobject=document.runner; 
 
    } 
 
    } 
 
}

body { 
 
    background-color: black; 
 
} 
 

 
.cursor-catcher{ 
 
    background: hsla(0, 0%, 100%, 0.70); 
 
    max-width: 644px; 
 
    width: 100%; 
 
    padding: 22px 36px 22px 36px; 
 
} 
 

 
.x{ 
 
    border-radius: 5px; 
 
    border: solid 1px black; 
 
    width: 10px; 
 
}

<body onLoad="MouseInit();" onMouseMove="MouseMove(event);"> 
 

 
<div name="runner" id="runner" style="position:absolute; left:10; top:50;"> 
 
<div class="cursor-catcher"> 
 
    <h2>Newsletter</h2> 
 
    Name: <input type="text" name="fullname"><br> 
 
    Email: <input type="text" name="email"><br> 
 
    <br> 
 
    <div class="x">x</div> 
 
</div> 
 
</div> 
 

 
</body>

出典

2016-11-22 azrm

ウェブページ上のdivの外にカーソルを移動できないようにしたいですか？私はすぐにあなたのウェブサイトをブラックリストに載せることができました。 – Archer

[Pointer Lock API]（https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API）を見てください。 – Ivar

いいえ、あなたはこれを誤解していると思います。私はdivがマウストラッカーのように振る舞い、divに捕まって欲しいです。 divにエントリを作成できるはずです。入力をしたくない場合は、単にマウストラッカーを閉じることができます。 @Archer – azrm

それはかなりうまく動作しますが、私はこれはアイデアだと思います。（バッファーは必要ありません）。

私はあなたのフォームを追加しました（私はあなたがそれを元に戻すことができ、スタイルを無視）

そして今、要求されたとして、それはトップ

<head> 
<style> 
#my_div { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
#my_div { 
    width: 300px; 
    height: 150px; 
    background: #ff0000; 
    position: absolute; 
} 
</style> 
<script> 
var my_div; 
topIgnore = 100; // (in pixel units) used for function ignoreTop 

window.onload = function() { 
    my_div = document.getElementById('my_div'); 
    var my_div_style = window.getComputedStyle(my_div); 
    var width_div = parseInt(my_div_style.width, 10); // remove 'px' from string 
    var height_div = parseInt(my_div_style.height, 10); 
    // make sure the property exists, else you can get a NaN 
    my_div.style.left = 0; 
    my_div.style.top = 0; 
    // event 
    window.onmousemove = function(e) { 
    // my_div.innerHTML = e.pageX +' - '+ (leftBorder + width_div) +' - '+ width_div; 
    cursorIsInsideDiv(e); 
    } 
    // TO DO: feel free to make similar functions for left/right/bottom 
    // removes the first 100px 
    function ignoreTop(top) { 
    if(top < topIgnore) { 
     return topIgnore; 
    } 
    return top; 
    } 
    function cursorIsInsideDiv(e) { 
    var leftBorder = parseInt(my_div.style.left, 10); // remove 'px' from string 
    var topBorder = parseInt(my_div.style.top, 10); 
    // move left 
    if(e.pageX < leftBorder) { 
     my_div.style.left = e.pageX + 'px'; 
    } 
    // move right 
    else if(e.pageX > (leftBorder + width_div)) { 
     my_div.style.left = (e.pageX - width_div) + 'px'; 
    } 
    // move up 
    if(e.pageY < topBorder) { 
     var top = e.pageY ; 
     top = ignoreTop(top); 
     my_div.style.top = top + 'px'; 
    } 
    // move down 
    else if(e.pageY > (topBorder + height_div)) { 
     my_div.style.top = (e.pageY - height_div) + 'px'; 
    } 
    } 
} 
</script> 
</head> 
<body> 
<div id="my_div"> 
    <h2>Newsletter</h2> 
    Name: <input type="text" name="fullname"><br> 
    Email: <input type="text" name="email"><br> 
</div> 
</body>

からheigher 100pxにより行っておりません。元の投稿：

<head> 
    <style> 
    #my_div { 
     width: 100%; 
     height: 100%; 
     padding: 0; 
     margin: 0; 
    } 
    #my_div { 
     width: 100px; 
     height: 100px; 
     background: #ff0000; 
     position: absolute; 
    } 
    </style> 
    <script> 
    var my_div; 
    window.onload = function() { 
     my_div = document.getElementById('my_div'); 
     my_div_style = window.getComputedStyle(my_div); 
     var width_div = parseInt(my_div_style.width, 10); // remove 'px' from string 
     var height_div = parseInt(my_div_style.height, 10); 
     // event 
     window.onmousemove = function(e) { 
     my_div.innerHTML = e.pageX + ',' + e.pageY + '<br/>' + width_div + ',' + height_div; 
     my_div.style.left = e.pageX - Math.floor(width_div/2); 
     my_div.style.top = e.pageY - Math.floor(height_div/2); 
     } 
    } 
    </script> 
</head> 
<body> 
    <div id="my_div"></div> 
</body>

非常にうまく、かなりクールな効果。

もちろん、my_div.innerHTML行は必要ありません。

あなたが必要とする、より具体的な機能があれば（あなたの質問に編集がありました。

出典

2016-11-22 14:43:30

ありがとう。赤いdiv内のマウスも移動できる可能性はありますか？マウスがエッジにプッシュし、あなたの例のように赤いdivを動かすだけですか？ @EmmanuelDelay – azrm

ああ、そうですね。確かに。だから私はバッファ（例えば、境界から3ピクセル）を作るでしょう。カーソルがそのバッファ内にあるときはいつでも、アクションがとられます。たとえば、カーソルを左下にドラッグすると、divの左下をカーソルの中央に移動せずにカーソルの位置にします。それはアイデアですか？ –

そうですね。バッファでそれは良いです。赤いフィールドにバッファー。このバッファーでは、マウスは赤いフィールドが動かずに自由に動くことができます。マウスがこのバッファを離れると、赤いフィールドはあなたの例のように動くはずです。 – azrm

Mousetrackerで入力を行うことは可能ですか？

答えて

関連する問題