programing

Ctrl + TEXT AREA에서 jQuery를 사용하여 입력합니다.

newnotes 2023. 9. 7. 22:03
반응형

Ctrl + TEXT AREA에서 jQuery를 사용하여 입력합니다.

커서가 TEXT AREA 에 있고 +Enter를 눌렀을 때 어떻게 무언가를 트리거합니까?

저는 jQuery를 사용하고 있습니다.

실제로 이 제품은 모든 브라우저에서 작동합니다.

if ((event.keyCode == 10 || event.keyCode == 13) && event.ctrlKey)

js fiddle로 연결합니다.

주의:

  • 윈도우와 리눅스의 Chrome에서 , 로 등록될 것입니다.keyCode13이 아닌 10(버그 리포트).그래서 우리는 둘 중 하나를 확인해야 합니다.
  • ctrlKey 는 Windows, Linux 및 macOS에 있습니다(없음.참고.

깃발을 이용해 키가 눌렸는지 확인할 수 있습니다.이와 같은 것:

$('#textareaId').keydown(function (e) {

  if (e.ctrlKey && e.keyCode == 13) {
    // Ctrl + Enter pressed
  }
});

여기서 위의 토막글을 확인합니다.

범용해

이 기능은 macOS도 지원합니다.Enter +와 +가 Enter모두 허용됩니다.

if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
    // do something
}

저는 다른 사람들의 답변이 불완전하거나 크로스 브라우저가 호환되지 않는다는 것을 발견했습니다.

이 코드는 구글 크롬에서 작동합니다.

$(function ()
{
    $(document).on("keydown", "#textareaId", function(e)
    {
        if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey)
        {
            alert('Ctrl + Enter');
        }
    });
});

다음과 같이 단순하지만 유연한 jQuery 플러그인으로 확장할 수 있습니다.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

따라서

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

사용자가 +를 누를 때 해당 양식의 텍스트 영역에 초점을 맞추어 양식을 제출해야 합니다.

(덕분에 jQuery를 사용하여 키보드에서 Enter를 누르는 것을 어떻게 감지할 수 있습니까?)

event.keyCode그리고.event.which감가 상각됩니다.

다음 작업을 처리합니다.CTRL/Command + EnterMac 및 Windows(반응)에서

import React from "react";

export const Component = () => {
    const keyDownHandler = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
        if ((e.ctrlKey || e.metaKey) && e.key == "Enter") {
            // handle Ctrl/Command + Enter
        }
    };
    
    return (
        <textarea onKeyDown={keyDownHandler} />
    );
};
$('my_text_area').focus(function{ set_focus_flag });

//ctrl on key down set flag

//enter on key down = check focus flag, check ctrl flag

경기에 조금 늦었을 수도 있지만, 여기 제가 사용하는 것이 있습니다.또한 커서의 현재 대상인 양식을 강제로 제출합니다.

$(document.body).keypress(function (e) {
    var $el = $(e.target);
    if (e.ctrlKey && e.keyCode == 10) {
        $el.parents('form').submit();
    } else if (e.ctrlKey && e.keyCode == 13) {
        $el.parents('form').submit();
    }
});

먼저 누르면 플래그를 설정해야 합니다. 키를 누른 상태에서 이 작업을 수행합니다.

그런 다음 의 키다운을 확인해야 합니다. 의 키업이 표시되면 플래그를 설정 해제합니다.

주목할 가치가 있습니다.keyCode감가 상각되었습니다.

다음을 사용할 수 있습니다.

if((e.ctrlKey || e.metaKey) && e.key === "Enter")

Mac과 Windows 모두에서 작동합니다.

반응 + TS를 사용하면 다음과 같습니다.

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if((e.ctrlKey || e.metaKey) && e.key === "Enter"){
         //do something
     }
};

언급URL : https://stackoverflow.com/questions/1684196/ctrl-enter-using-jquery-in-a-textarea

반응형