텍스트 영역에서 “shift + enter”를 감지하고 새 줄을 생성하려면 어떻게합니까? 입력 enter하면 텍스트 영역이 다음 줄로 이동하기를

현재 사람 enter이 텍스트 영역을 누르면 양식이 제출됩니다.
좋아, 난 원해

그러나 shift+ 를 입력 enter하면 텍스트 영역이 다음 줄로 이동하기를 원합니다.\n

JQuery가능한 한 간단하거나 일반 JavaScript로 어떻게 할 수 있습니까?

답변

더 간단한 솔루션을 더 잘 사용하십시오.

아래의 Tim 솔루션이 더 좋습니다 .https :
//stackoverflow.com/a/6015906/4031815

내 솔루션

이런 식으로 할 수 있다고 생각합니다 ..

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

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

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

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;
}

그런 다음 Shift+ Entertogether 인 경우 텍스트 영역 값을 적절하게 바꾸고, Enter혼자 누르면 양식을 제출하십시오 .

$('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();
        }
    }
});

여기 데모가 있습니다

답변

쉽고 우아한 솔루션 :

먼저 Enter텍스트 영역 내부를 눌러도 스크립트가 없으면 양식을 제출하지 않습니다. 그것은 사용자가 기대하는 행동이며 변경하지 않는 것이 좋습니다. 그러나이 작업을 수행해야하는 경우 가장 쉬운 방법은 Enter양식 을 제출하고 변경 하는 스크립트를 찾는 것입니다. 코드는 다음과 같습니다

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);

답변

이러한 답변의 대부분은 이것을 복잡하게 만듭니다. 이런 식으로 시도해보십시오.

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

캐럿 위치로 엉망이되거나 JS로 줄 바꿈되지 않습니다. 기본적으로, Shift 키를 누르면 기능이 실행되지 않으므로 Enter / Return 키가 정상 기능을 수행 할 수 있습니다.

답변

왜 안돼

$(".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;
         }
);

답변

다음은 AngularJS를 사용 하는 사람과 동일한 문제가있는 경우 ng-keyup을 사용하는 AngularJS 솔루션 입니다.

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

답변

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

shiftenter어느 위치에서나 + 새 줄

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>
스 니펫 확장