텍스트 영역에서 "shift+enter"를 감지하고 새 줄을 생성하려면 어떻게 해야 합니까?

텍스트 영역에서 "shift+enter"를 감지하고 새 줄을 생성하려면 어떻게 해야 합니까?

현재, 그 사람이 텍스트 영역 안에서 누르면, 양식이 제출될 것입니다.
좋아요, 저는 그걸 원해요.

그러나 +를 입력하면 텍스트 영역이 다음 행으로 이동합니다.\n

어떻게 해야 하나요?JQuery아니면 가능한 한 단순한 자바스크립트?

쉽고 우아한 솔루션:

첫째, 텍스트 영역 내부를 누르면 양식을 제출할 스크립트가 없는 경우 양식이 제출되지 않습니다.이것이 사용자가 기대하는 행동이며 변경하지 않는 것이 좋습니다.그러나 이 작업을 수행해야 하는 경우 양식을 제출하는 스크립트를 찾아서 변경하는 것이 가장 쉬운 방법입니다.코드에는 다음과 같은 것이 있을 것입니다.

if (evt.keyCode == 13) {
    form.submit();
}

그리고 당신은 그냥 그것을 바꿀 수 있습니다.

if (evt.keyCode == 13 && !evt.shiftKey) {
    form.submit();
}

---

반면에 어떤 이유로 이 코드에 액세스할 수 없는 경우 캐럿이 텍스트 끝에 없더라도 모든 주요 브라우저에서 이 코드가 작동하도록 하려면 다음 작업을 수행해야 합니다.

jsFiddle: http://jsfiddle.net/zd3gA/1/

코드:

function pasteIntoInput(el, text) {
    el.focus();
    if (typeof el.selectionStart == "number"
            && typeof el.selectionEnd == "number") {
        var val = el.value;
        var selStart = el.selectionStart;
        el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
        el.selectionEnd = el.selectionStart = selStart + text.length;
    } else if (typeof document.selection != "undefined") {
        var textRange = document.selection.createRange();
        textRange.text = text;
        textRange.collapse(false);
        textRange.select();
    }
}

function handleEnter(evt) {
    if (evt.keyCode == 13 && evt.shiftKey) {
        if (evt.type == "keypress") {
            pasteIntoInput(this, "\n");
        }
        evt.preventDefault();
    }
}

// Handle both keydown and keypress for Opera, which only allows default
// key action to be suppressed in keypress
$("#your_textarea_id").keydown(handleEnter).keypress(handleEnter);

더 단순한 솔루션을 사용하는 것이 좋습니다.

아래 Tim의 솔루션이 더 낫습니다. https://stackoverflow.com/a/6015906/4031815 을 사용하는 것이 좋습니다.

---

나의 해결책

제 생각에 당신은 이런 것을 할 수 있을 것 같습니다.

EDIT : 캐럿 위치에 관계없이 작동하도록 코드가 변경되었습니다.

코드의 첫 번째 부분은 캐럿 위치를 얻는 것입니다.

참조: 처음부터 문자로 텍스트 영역에서 캐럿 열(픽셀이 아님) 위치를 가져오는 방법은 무엇입니까?

function getCaret(el) { 
    if (el.selectionStart) { 
        return el.selectionStart; 
    } else if (document.selection) { 
        el.focus();
        var r = document.selection.createRange(); 
        if (r == null) { 
            return 0;
        }
        var re = el.createTextRange(), rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }  
    return 0; 
}

그런 다음 +가 함께 있을 때 텍스트 영역 값을 적절하게 바꾸고, 단독으로 누를 경우 양식을 제출합니다.

$('textarea').keyup(function (event) {
    if (event.keyCode == 13) {
        var content = this.value;  
        var caret = getCaret(this);          
        if(event.shiftKey){
            this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
            event.stopPropagation();
        } else {
            this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);
            $('form').submit();
        }
    }
});

여기 데모가 있습니다.

이 답변들의 대부분은 이것을 너무 복잡하게 만듭니다.이런 식으로 시도해 보는 게 어때요?

$("textarea").keypress(function(event) {
        if (event.keyCode == 13 && !event.shiftKey) {
         submitForm(); //Submit your form here
         return false;
         }
});

캐럿 위치를 어지럽히거나 줄을 JS로 밀지 않습니다.기본적으로 시프트 키를 누르고 있으면 이 기능이 실행되지 않으므로 입력/반환 키가 정상적인 기능을 수행할 수 있습니다.

왜 그냥

$(".commentArea").keypress(function(e) {
    var textVal = $(this).val();
    if(e.which == 13 && e.shiftKey) {

    }
    else if (e.which == 13) {
       e.preventDefault(); //Stops enter from creating a new line
       this.form.submit(); //or ajax submit
    }
});

jQuery 단축키 플러그인 및 이 코드 사용

jQuery(document).bind('keydown', 'shift+enter', 
         function (evt){ 
             $('textarea').val($('#textarea').val() + "\n");// use the right id here
             return true;
         }
);

여기 앵귤러가 있습니다.Angular를 사용하여 동일한 문제를 가진 사람이 있는 경우 ng-keyup을 사용하는 JS 솔루션제이에스

ng-keyup="$event.keyCode == 13 && !$event.shiftKey && myFunc()"

ReactJS ES6를 사용하는 가장 간단한 방법은 다음과 같습니다.

shift 임의의enter 위치에 있는 새 줄

enter 차단됨

class App extends React.Component {

 constructor(){
    super();
    this.state = {
      message: 'Enter is blocked'
    }
  }
  onKeyPress = (e) => {
     if (e.keyCode === 13 && e.shiftKey) {
        e.preventDefault();
        let start = e.target.selectionStart,
            end = e.target.selectionEnd;
        this.setState(prevState => ({ message:
            prevState.message.substring(0, start)
            + '\n' +
            prevState.message.substring(end)
        }),()=>{
            this.input.selectionStart = this.input.selectionEnd = start + 1;
        })
    }else if (e.keyCode === 13) { // block enter
      e.preventDefault();
    }
    
  };

  render(){
    return(
      <div>
      New line with shift enter at any position<br />
       <textarea 
       value={this.state.message}
       ref={(input)=> this.input = input}
       onChange={(e)=>this.setState({ message: e.target.value })}
       onKeyDown={this.onKeyPress}/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'></div>

Shift + 임의의 키를 제어할 수 있는 방법을 찾고 있는 스레드를 찾았습니다.저는 제가 필요로 하는 것을 달성하기 위해 이 결합된 기능을 만들기 위해 다른 솔루션을 함께 붙여 넣었습니다.다른 사람에게 도움이 되길 바랍니다.

function () {
    return this.each(function () {
    $(this).keydown(function (e) {
        var key = e.charCode || e.keyCode || 0;
        // Shift + anything is not desired
        if (e.shiftKey) {
            return false;
        }
        // allow backspace, tab, delete, enter, arrows, numbers 
        //and keypad numbers ONLY
        // home, end, period, and numpad decimal
        return (
            key == 8 ||
            key == 9 ||
            key == 13 ||
            key == 46 ||
            key == 110 ||
            key == 190 ||
            (key >= 35 && key <= 40) ||
            (key >= 48 && key <= 57) ||
            (key >= 96 && key <= 105));
    });
});

나는 텍스트 영역을 사용하는 대신 콘텐츠 편집 가능한 true를 추가하여 div를 사용합니다.

희망이 당신을 도울 수 있습니다.

$("#your_textarea").on('keydown', function(e){//textarea keydown events
  if(e.key == "Enter")
  {
    if(e.shiftKey)//jump new line
    {
     // do nothing
    }
    else  // do sth,like send message or else
    {
       e.preventDefault();//cancell the deafult events
    }
  }
})

Shift+Engular2+로 키 입력을 감지하는 다른 솔루션

Inside Component.html

<input type="text" (keydown.shift.enter)="newLine($event)">

내부 구성요소.ts

newLine(event){
      if(event.keyCode==13 && event.shiftKey){
        alert('Shift+Enter key Pressed');
      }
  }

이 코드는 내 목적에 완벽하게 잘 작동합니다.

document.getElementById('text').addEventListener('keypress', (e) => {
  if (e.key == 'Enter' && !e.shiftKey) {
    e.preventDefault()
    console.log('your code goes here');
  }
  if (e.key == 'Enter' && e.shiftKey) {
    e.preventDefault();
    console.log("insertLineBreak");
    const txtArea = document.getElementById('text');
    txtArea.value += '\r\n';
  }
})

그리고 jquery 예제

$.fn.pressEnter = function(fn) {
    return this.each(function() {  
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
        
            /*When SHIFT return false*/
            if(e.shiftKey==true) return false;

            if(e.keyCode == 13)
            {
              /*You can do the thing on ENTER*/
              alert('Enter press');
            }

        })
    });  
}; 
$('.exampleClass').pressEnter(function(){})

div{
  width:200px;
  height:100px;
  border:solid 1px #000;
  float:left;
}
textarea{
  width:200px;
  height:100px;
  border:solid 1px #000;
  float:right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="exampleClass" contenteditable></div>

<textarea  class="exampleClass"></textarea>

누군가가 jQuery 없이 이것을 어떻게 하는지 여전히 궁금해 할 경우.

HTML

<textarea id="description"></textarea>

자바스크립트

const textarea = document.getElementById('description');

textarea.addEventListener('keypress', (e) => {
    e.keyCode === 13 && !e.shiftKey && e.preventDefault(); 
})

바닐라 JS

var textarea = document.getElementById('description');

textarea.addEventListener('keypress', function(e) {
    if(e.keyCode === 13 && !e.shiftKey) {
      e.preventDefault();
    }
})

이건 나한테 효과가 있어요!

$("#your_textarea").on('keydown', function(e){
    if(e.keyCode === 13 && !e.shiftKey) 
    {

          $('form').submit();

    }
});

용사를 ng-keyup된 , 를 누를 .JS로 된 지시문, 누를 때만 메시지 보내기Enter와 와Shift+Enter새로운 노선을 택할 겁니다

ng-keyup="($event.keyCode == 13&&!$event.shiftKey) ? sendMessage() : null"

이것이 오래된 질문이라는 것을 알지만, 저는 몇몇 사람들이 사용한다면 고려하고 싶어할 수 있는 암묵적인 관찰을 하고 싶었습니다.Shift+A-Z.

document.onkeydown = (k) => {
  if (k.key === "Q") {
    console.log("Shift + Q");
  }
}

케이스로 키를 확인할 수 있습니다. 예를 들어,"Q"또는"q"만약 전자를 한다면, 그것은 암시됩니다.Shift대문자이기 때문에 압박을 받고 있습니다.

여기서 기능과 관련된 한 가지 버그는 다음과 같습니다.CapsLock시작했습니다. 하지만 저처럼 개인적인 대본에 사용한다면 큰 문제가 되지 않습니다.

또 다른 잠재적 이점은 다음을 찾는 명시적 조건을 "숨기는" 것일 수 있습니다.Shift누를 키입니다.하지만 이것은 분명히 어설픈 제안입니다.

가지 이 전송됩니다.\n필요하지 않습니다.
keydown▁key니합반▁the▁return▁event환.13 키를

​$("#mytestarea").keydown(function (e) {
   ​
   ​if (e.keyCode == 13) { // Enter pressed
       //No shift or alt or ctrl
       ​if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
           ​SendMsg(); // or submit or what you wan't
       ​}
       ​if (e.shiftKey) {
           //replace the shift for keycode 13 only
           ​return 13;
       ​}
                   ​
       ​//method to prevent from default behaviour
       ​e.preventDefault();
   ​}
});

<input type="text" onkeydown="handleMessageKeydown" /> 

또는 일부 콘텐츠 편집 가능 요소:

<div contenteditable="true" onchange="handleMessageKeydown" />

handleMessageKeydown(e) {
      if (!e.shiftKey && e.key === "Enter") {
          e.preventDefault()
          sendMessage()
      }
 }

shift 키를 Enter 키로 누르면 새 라인이 생성됩니다. 그렇지 않으면 위에 주어진 if 조건 안에 들어갑니다.if 조건에서 e.proventDefault() 라인이 가장 중요합니다.키다운 이벤트 핸들러의 경우 e.proventDefault()는 서버로 메시지 보내기 등과 같은 고유한 작업을 수행할 수 있도록 작업 실행을 중지합니다.

하는 가장 좋은 방법은 다음과 같습니다.

  if (e.key === 'Enter') {
    console.log('enter');
  }
  if (e.key === 'Enter' && e.ctrlKey) {
    console.log('clt+enter');
  }
  if (e.key === 'Enter' && e.ctrlKey && e.shiftKey) {
    console.log('clt+shift+enter');
  }

언급URL : https://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea