मैं "शिफ्ट + एंटर" का पता कैसे लगा सकता हूं और टेक्सारिया में एक नई लाइन उत्पन्न कर सकता हूं?

Question

वर्तमान में, यदि व्यक्ति enterपाठ क्षेत्र के अंदर दबाता है, तो फॉर्म सबमिट हो जाएगा।
अच्छा, मुझे वह चाहिए।

लेकिन जब वे shift+ टाइप करते हैं enter, तो मैं चाहता हूं कि टेक्स्टारिया अगली पंक्ति में जाए:\n

मैं इसे JQueryया सादे जावास्क्रिप्ट में यथासंभव सरल कैसे कर सकता हूं ?

Comments

ओह, मैं इस तरह के बदले हुए व्यवहार से कैसे नफरत करता हूं ... ^ ^ आप ऐसा क्यों करेंगे? यदि आप शब्द में एक पत्र लिखते हैं, तो क्या आप यह उम्मीद करेंगे कि एक फाइल में टेक्स्ट को सेव करते समय एंटर मारें या यह एक नई लाइन शुरू कर दे?

— एंड्रियास

मैं एक चैट रूम बना रहा हूं। इसी तरह स्काइप डोए बैठते हैं।

— TIMEX

के लिए जाँच करें e.shiftKey।

— थाई

आपको बस उस कोड को ढूंढना है जो एंटर को फॉर्म सबमिट करने से रोकता है और ईवेंट की shiftKeyप्रॉपर्टी की जांच करता है ।

— टिम डाउन

पाठ फ़ील्ड में एक नई पंक्ति के लिए Shift ENTER "बदला हुआ" व्यवहार नहीं है। यह गधा के वर्षों के लिए व्यवहार किया गया है, सभी प्रकार की चीजों के लिए। मैंने दशकों पहले इसका उपयोग स्प्रैडशीट में पाठ दर्ज करते समय किया था।

— साइप्रस में आराम से

Answer 1

बेहतर उपयोग सरल समाधान:

नीचे दिए गए टिम का समाधान बेहतर है मैं इसका उपयोग करने का सुझाव देता हूं: 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 मान की जगह तदनुसार Shift+ जब Enterएक साथ 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();
        }
    }
});

यहाँ एक डेमो है

Comments

अगर कैरेट टेक्टेरिया की सामग्री के अंत में नहीं है तो यह काम नहीं करेगा।

— टिम डाउन

इसके अलावा, एक टाइपो है (आपका मतलब है event.keyCode == 13) और मुझे लगता है कि आप शायद इसके event.preventDefault()बजाय भी चाहते थे event.stopPropagation()।

— टिम डाउन

मैंने इसे बदल दिया। अब यह कार्यवाहक स्थिति के बावजूद काम करेगा। और मेरे द्वारा event.stopPropagation()कुछ अन्य कोड को रोकने का मतलब है जो उसने फॉर्म जमा करने के लिए लिखा हो।

— जिष्णु एपी

उस कार्य स्थिति की स्थिति त्रुटिपूर्ण है (लिंक किए गए कार्य स्थिति स्थिति पर मेरी टिप्पणी और उत्तर देखें), और आपको वैसे भी ऐसा करने के लिए कार्यस्थल की आवश्यकता नहीं है। मेरा जवाब यहां देखें। पुनः event.stopPropagation(), जो ईवेंट को DOM के आगे बुदबुदाने से रोकेगा लेकिन की-लाइन को ब्रेक को सम्मिलित करने की अपनी डिफ़ॉल्ट क्रिया को करने से नहीं रोकेगा (हालाँकि वास्तव में keyupमेरे सुझाव में event.preventDefault()ऐसा नहीं होगा)।

— टिम डाउन

यद्यपि यह ठीक काम करता है, लेकिन इसने त्रुटि दी जो carentपरिभाषित नहीं है, अगर मैं इसे कैरेट में बदलता हूं तो इसमें 2 नई लाइनें जुड़ती हैं

— आमिर महमूद

Answer 2

आसान और सुरुचिपूर्ण समाधान:

सबसे पहले, Enterएक textarea के अंदर दबाने से फॉर्म जमा नहीं होता है जब तक कि आपके पास ऐसा करने के लिए स्क्रिप्ट न हो। यही व्यवहार उपयोगकर्ता को उम्मीद है और मैं इसे बदलने के खिलाफ सिफारिश करूंगा। हालाँकि, यदि आपको ऐसा करना चाहिए, तो सबसे आसान तरीका यह होगा कि आप उस स्क्रिप्ट को खोजें 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);

Answer 3

इनमें से अधिकांश उत्तर इस पर निर्भर हैं। इस तरह से कोशिश क्यों नहीं की?

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

जेएस में कार्यवाहक स्थिति या शॉविंग लाइन के साथ कोई गड़बड़ नहीं है। मूल रूप से, यदि शिफ्ट कुंजी को दबाया जा रहा है, तो फ़ंक्शन नहीं चलेगा, इसलिए प्रवेश / वापसी कुंजी को अपने सामान्य फ़ंक्शन को करने की अनुमति देता है।

Comments

जैसा मुझे चाहिए था यह बिल्कुल वैसा ही है। धन्यवाद।

— ताकु योशी

Answer 4

सिर्फ क्यों नहीं

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

Comments

आप सिर्फ एक शर्त का उपयोग कर सकते हैं जैसे (event.keyCode == 13 &&! Event.shiftKey)। बस एक टिप: यदि आप नॉकआउट का उपयोग करते हैं, तो आपको मूल्य को अपडेट करने के लिए टेक्सारिया मुट्ठी को अनफोकस करने की आवश्यकता है: jQuery (यह) .blur ();

— जस्टिन

Answer 5

JQuery हॉटकीज़ प्लगइन और इस कोड का उपयोग करें

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

Answer 6

अगर कोई भी एक ही मुद्दा AngularJS का उपयोग कर रहा है, तो एनजी-कीप का उपयोग करके यहां एक AngularJS समाधान है ।

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

Answer 7

यहाँ 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>

Answer 8

मुझे यह थ्रेड 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));
    });
});

Answer 9

मामले में कोई अभी भी सोच रहा है कि यह jQuery के बिना कैसे किया जाए।

एचटीएमएल

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

जावास्क्रिप्ट

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

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

वेनिला जेएस

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

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

Answer 10

मैं textarea का उपयोग करने के बजाय संतुष्ट सत्य जोड़कर 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
    }
  }
})

Answer 11

यह मेरे लिए काम करता है!

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

          $('form').submit();

    }
});

Answer 12

ng-keyupकोणीयजेएस में निर्देश का उपयोग करना, केवल Enterकुंजी दबाने पर एक संदेश भेजें और Shift+Enterबस एक नई लाइन ले जाएगा।

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