Mousetracker에서 입력을 할 수 있습니까?

나는 커서 뒤에 오는 div를 원한다. 하지만 div에 입력 할 수있는 가능성이 있어야합니다. 불행히도 나는 div 만 커서를 따라갈 수 있지만 커서는 div를 입력하지 않는다.Mousetracker에서 입력을 할 수 있습니까?

또는 다음과 같음 : 커서가 div에 갇혀있을 수 있습니까? 그가 부서 지거나 들어갈 때까지. 커서가 테두리로 이동하면 div가 적절한 방향으로 이동해야합니다. (닫기 기능은 현재 코드에 존재하지 않는, 그러나 나는 나 자신 있음을 해결할 수 있습니다.)

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>

에서 100 픽셀보다에 더 높은 이동하지 않습니다 (I 스타일을 무시, 당신은 다시 넣을 수 있습니다) 원본 글 :

<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에서 입력을 할 수 있습니까?

답변

관련 문제