আমি কীভাবে "শিফট + এন্টার" সনাক্ত করব এবং টেক্সারিয়ায় একটি নতুন লাইন তৈরি করব?


145

বর্তমানে, যদি ব্যক্তি enterপাঠ্য অঞ্চলের ভিতরে টিপেন , ফর্মটি জমা দেবে।
ভাল, আমি এটা চাই।

তবে যখন তারা shift+ টাইপ করেন enter, আমি চাই যে টেক্সটরিয়াটি পরবর্তী লাইনে চলে যাবে:\n

আমি কীভাবে JQueryসম্ভব বা সরল জাভাস্ক্রিপ্টটিকে যতটা সম্ভব সহজ করতে পারি ?


3
ওহ, আমি কীভাবে এমন পরিবর্তিত আচরণকে ঘৃণা করি ... ^^ আপনি কেন এমন করবেন? আপনি যদি কথায় কথায় একটি চিঠি লেখেন, আপনি কী এন্টার দিয়ে আঘাত করার সময় কোনও ফাইলটিতে পাঠ্য সংরক্ষণ করবেন বা এটি একটি নতুন লাইন শুরু করা উচিত?
আন্দ্রেয়াস

18
আমি একটি আড্ডা ঘর তৈরি করছি। স্কাইপ ডো এইভাবে বসে আছে।
টিমেক্স

10
জন্য পরীক্ষা করুন e.shiftKey
থাই

6
আপনাকে যা করতে হবে তা হ'ল কোডটি যা এন্টারটি ফর্ম জমা দেওয়া থেকে বাধা দেয় এবং ইভেন্টের shiftKeyসম্পত্তিটি পরীক্ষা করে ।
টিম ডাউন

3
পাঠ্য ক্ষেত্রে নতুন লাইনের জন্য শিফট ENTER আচরণ "পরিবর্তিত" নয়। এটি গাধার বছরের জন্য, সমস্ত ধরণের জিনিসগুলির জন্য প্রত্যাশিত আচরণ ছিল। আমি কয়েক দশক আগে স্প্রেডশিটে পাঠ্য প্রবেশ করার সময় এটি ব্যবহার করেছি।
সাইপ্রাসে

উত্তর:


81

আরও ভাল ব্যবহার সহজ সমাধান:

টিম এর সমাধান নিচের ভাল আমি যে ব্যবহার করার সুপারিশ হল: 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+ 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();
        }
    }
});

এখানে একটি ডেমো রয়েছে


টেক্সারিয়ার সামগ্রীর শেষে ক্যারেটটি না থাকলে এটি কাজ করবে না।
টিম ডাউন

এছাড়াও, একটি টাইপো রয়েছে (আপনার অর্থ event.keyCode == 13) এবং আমি মনে করি আপনি সম্ভবত event.preventDefault()এটির চেয়েও চেয়েছিলেন event.stopPropagation()
টিম ডাউন

আমি এটি পরিবর্তন করেছিলাম. এখন এটি ক্যারেট অবস্থান নির্বিশেষে কাজ করবে। এবং event.stopPropagation()আমি বোঝাতে চাইছি অন্য কিছু কোড যা তিনি ফর্মটি জমা দেওয়ার জন্য লিখেছিলেন stop
জিশনু এপি

7
এই ক্যারেট অবস্থানের ফাংশনটি ত্রুটিযুক্ত (লিঙ্কযুক্ত ক্যারেট অবস্থানের প্রশ্নে আমার মন্তব্য এবং উত্তর দেখুন) এবং যাইহোক এটি করার জন্য আপনার ক্যারেটের অবস্থানের দরকার নেই। আমার উত্তর এখানে দেখুন। পুনরায় event.stopPropagation(), এটি ঘটনাকে আরও ডিওএম আপ করতে বাধা দেবে তবে কিপ্রেসটিকে একটি লাইন ব্রেক সন্নিবেশ করানোর তার ডিফল্ট ক্রিয়া করতে বাধা দেবে না (যদিও keyupআমার পরামর্শে এটি আর event.preventDefault()করবে না)।
টিম ডাউন

2
যদিও এটি দুর্দান্ত কাজ করেছে, তবে এটি ত্রুটি দিয়েছে যা carentসংজ্ঞায়িত নয়, যদি আমি এটি কেরেটে পরিবর্তন করি তবে এটি 2 টি নতুন লাইন যুক্ত করেছে
আমির মাহমুদ

163

সহজ এবং মার্জিত সমাধান:

প্রথমত, টিপে Enterএকটি পাঠ্য এলাকা ভিতরে ফর্ম জমা না যদি না আপনি এটা যে কি করতে স্ক্রিপ্ট আছে। এটি ব্যবহারকারীর প্রত্যাশার আচরণ এবং আমি এটি পরিবর্তন করার বিরুদ্ধে সুপারিশ করব। যাইহোক, আপনার যদি এটি করতেই হয় তবে সবচেয়ে সহজ পন্থাটি হ'ল Enterফর্মটি জমা দেওয়া এবং এটি পরিবর্তন করে দেওয়া স্ক্রিপ্টটি সন্ধান করা। কোডটির মতো কিছু থাকবে

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

... এবং আপনি কেবল এটিতে পরিবর্তন করতে পারেন

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

অন্যদিকে, যদি আপনার কোনও কারণে এই কোডটিতে অ্যাক্সেস না থাকে তবে ক্যারেটটি পাঠ্যের শেষে না থাকলেও সমস্ত বড় ব্রাউজারগুলিতে এটি কাজ করার জন্য আপনাকে নিম্নলিখিত কাজগুলি করতে হবে:

জেএসফিডাল: 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);

42

এই উত্তরগুলির বেশিরভাগই এটিকে জটিল করে তোলে। এভাবে চেষ্টা করবেন না কেন?

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

ক্যারেট পজিশনে বা জেএসএসে কাঁপানো লাইনটি বিভ্রান্ত করার সাথে কোনও গোলযোগ নেই। মূলত, শিফট কী টিপে রাখা হলে ফাংশনটি চলবে না, সুতরাং প্রবেশ / রিটার্ন কীটিকে তার সাধারণ ক্রিয়াকলাপটি সম্পাদন করার অনুমতি দেয়।


আমি ঠিক তাই চেয়েছিলাম ধন্যবাদ।
টাকু যোশি

18

শুধু না কেন

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

2
আপনি কেবলমাত্র একটি ইভেন্ট (ইভেন্ট.কি কোড == 13 &&! ইভেন্ট.shiftKey) এর মতো একটি শর্ত ব্যবহার করতে পারেন। কেবলমাত্র একটি টিপ: আপনি যদি নকআউটজ ব্যবহার করেন তবে মানটি আপডেট করার জন্য আপনাকে টেক্সারিয়া মুঠিটি ফোকাস করতে হবে: jQuery (এটি) .blur ();
জাস্টিন

4

ব্যবহার করুন jQuery এর হট প্লাগ এবং এই কোড

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

3

অ্যাংুলারজেএস ব্যবহার করে যদি কারও একই সমস্যা থাকে তবে এনজি-কীআপ ব্যবহার করে এখানে একটি অ্যাঙ্গুলারজেএস সমাধান রয়েছে।

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

3

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>


2

আমি এই থ্রেডটি শিফট + যে কোনও কী নিয়ন্ত্রণ করার উপায় খুঁজছি looking আমার যা প্রয়োজন তা পূরণ করতে এই সংযুক্ত ফাংশনটি করার জন্য আমি অন্যান্য সমাধানগুলি একসাথে আটকালাম। আমি আশা করি এটি অন্য কাউকে সাহায্য করবে।

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

1

যদি কেউ এখনও 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();
    }
})

1

আমি টেক্সারিয়া ব্যবহার না করে বিতর্কযোগ্য সত্য যুক্ত করে ডিভ ব্যবহার করি।

আশা আপনাকে সাহায্য করতে পারে।

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


0

ng-keyupকৌণিক জেএসে নির্দেশিকা ব্যবহার করে , কেবল টিপানোর কীতে একটি বার্তা প্রেরণ করুন Enterএবং Shift+Enterকেবল একটি নতুন লাইন নেবেন।

ng-keyup="($event.keyCode == 13&&!$event.shiftKey) ? sendMessage() : null"
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.