활성 텍스트 상자에 팝업의 바인딩 위치

툴팁과 비슷한 selected_element (팝업 트리거링시 활성화 됨)에 상대적인 상단 및 좌측 값을 설정하는 방법을 알아 내려고합니다. jQuery 함께 $(). position() 사용하여 시도했지만 CSS로 설정 한 기본 0,0 재정의하지 않습니다.활성 텍스트 상자에 팝업의 바인딩 위치

다음은 JSFiddle입니다. https://jsfiddle.net/sethkillian2/cd6agg73/3/ a, c, e, i, o 또는 u를 눌러 메뉴를 트리거하십시오.

$(popup).position({ 
    of: $(activeElement), 
    my: 'left top', 
    at: 'left top', 
    offset: '0 0' 
}); 
$('body').append(popup);

중 하나를 다음 문자 메뉴가 확장 때문에 작동하지 않는 것 절대 외에 아무것도 위치 속성을 변경 :

또한, 여기 내 시도의 일부입니다. 또한 $ ("# charMap"). position (...)을 사용하여 요소를 추가 한 직후 ID로 요소를 가져 오려고했습니다.

업데이트 : 가치가있는 부분에 대해 textarea-caret-position 구성 요소 (https://github.com/component/textarea-caret-position)를 사용해 보았지만 정확하지는 않습니다.

출처

2017-10-31 Jerry Richards

하지 결과는 기대했던 일부에 대해 동일한 속성을 설정할 수 있습니다? – guest271314

Charmap은 activeElement로 저장된 활성 텍스트 상자 위에 나타나야합니다. –

margin-top 및 margin-left 속성은 CSS에서 #ta으로 설정됩니다. 당신이 얻을 수 .css()를 사용 popup

$(popup).css($(activeElement).css(["marginTop", "marginLeft"]));

jsfiddle https://jsfiddle.net/cd6agg73/9/

출처

2017-10-31 03:45:26 guest271314

유일한 단점은 텍스트 단락 또는 그 위에 뭔가가있는 경우 더 이상 작동하지 않는다는 것입니다. 여백이나 패딩에 의존하지 않고 실제 위치에 의존하는 솔루션을 찾고 있습니다. –

"실제 위치"는 무엇을 의미합니까? 'var props = $ (activeElement) .css ([ "marginTop", "marginLeft"]); props.marginTop = parseFloat (props.marginTop) - ($ (activeElement) .height() * 2.5) + "px"; $ (팝업) .css (소품);'? 또는 .getBoundingClientRect()를 사용하여 var {top, left} = activeElement.getBoundingClientRect(); $ (팝업) .css ({위쪽, 왼쪽}),'https://jsfiddle.net/cd6agg73/12/? Answer에서 코드와 동일한 결과를 렌더링해야합니다. – guest271314

활성 텍스트 상자에 팝업의 바인딩 위치

답변

관련 문제