JQuery .val()

Question

के साथ इसे साफ़ करने के बाद मैं टेक्स्टरेरा में अतिरिक्त नई लाइन को कैसे हटा सकता हूं मेरे पास त्वरित उत्पाद प्रविष्टि के लिए एक फॉर्म है। (FYI करें, मैं प्रपत्र तालिकाओं के साथ सेट तो मैं सही प्रत्येक इनपुट के लिए लेबल संरेखित कर सकते हैं।)

<table id="create-item"> 
    <tbody> 
    <tr> 
     <th> 
     <label for="name">Name</label> 
     </th> 
     <td> 
     <input class="name" name="name" /> 
     </td> 
    </tr> 
    <tr> 
     <th> 
     <label for="price">Price</label> 
     </th> 
     <td> 
     <input class="price" name="price" /> 
     </td> 
    </tr> 
    <tr> 
     <th> 
     <label for="description">description</label> 
     </th> 
     <td> 
     <textarea class="description" name="description" rows="3" cols="50" /> 
     </td> 
    </tr> 
    </tbody> 
</table> 

मैं इसे सेट अप है, इसलिए जब टैब या प्रवेश इनपुट क्षेत्रों के लिए पहले में दबाया जाता है कि, यह उपयोगकर्ता को अगले $ (": इनपुट") फ़ील्ड में ले जाता है। जब उपयोगकर्ता अंतिम इनपुट फ़ील्ड में प्रवेश (कुंजीकोड 13) पर क्लिक करता है जो टेक्स्टरेरा है, तो मेरे पास फॉर्मेट डेटाबेस में आइटम बनाते हैं, तीन इनपुट फ़ील्ड के मानों को साफ़ करते हैं और तैयारी में पहले इनपुट फ़ील्ड पर फ़ोकस करते हैं एक और आइटम दर्ज करें। यहां वह फ़ंक्शन है जो वर्ग "विवरण" के साथ टेक्स्टरेरा में "कीप्रेस" के माध्यम से बाध्य है।

nextFieldOnEnter: function(e) { 
    var $that = $(e.currentTarget); 
    if (e.keyCode == (13 || 9)) { 
    $that 
     .closest("tr") 
     .next("tr") 
      .find(":input") 
      .focus(); 
    }; 
}, 

createOnEnter: function(e) { 
    if (e.keyCode == 13) { 
    items.create(this.newAttributes()); 
    this.$("#create-item :input").val(''); 
    this.$("#create-item :input")[0].focus(); 
    }; 
}, 

समस्या मेरे पास है कि उपयोगकर्ता द्वारा पहली बार पेज पाठ क्षेत्र में खाली है लोड करता है, लेकिन उसके बाद उपयोगकर्ता पहले आइटम में प्रवेश करती है और प्रेस पाठ क्षेत्र खाली दिखाई देता है में प्रवेश, लेकिन वास्तव में अब एक नई पंक्ति वर्ण है है । इसका अर्थ यह है कि जब उपयोगकर्ता दूसरे और सभी भावी वस्तुओं के लिए फिर से टेक्स्टरेरा में जाता है, तो सम्मिलन बिंदु पहले की बजाय टेक्स्टरेरा की दूसरी पंक्ति में बैठा होता है और जब उपयोगकर्ता उन अतिरिक्त आइटमों को सहेजने के लिए एंटर पर क्लिक करता है, तो वे सहेजे जाते हैं एक अग्रणी न्यूलाइन चरित्र के साथ।

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

अगला मैंने कक्षा "मूल्य" के इनपुट में "कीप" और "एंटर" को बांधने की कोशिश की है, अब createOnEnter को ट्रिगर कर रहा है जिससे उपयोगकर्ता को textarea में कुछ भी दर्ज करने की इजाजत दी जा सके।

सारांश:

कुंजी दबाने = .val ('') के साथ यह साफ करने के बाद पाठ क्षेत्र में अतिरिक्त न्यू लाइन

keydown = वर्ग "नाम" के साथ इनपुट पर शुरू हो रहा है और ध्यान दिया जाता है घटना "nextFieldOnEnter" दर्ज वर्ग "कीमत" के साथ इनपुट करने के लिए

कीप = मूल्य से ईवेंट दर्ज करें टेक्स्ट बनाने के लिए बाध्य "createOnEnter" ट्रिगर कर रहा है।

किसी के पास कोई समस्या है कि मैं उन समस्याओं के बिना टेक्स्टरेरा को कैसे साफ़ कर सकता हूं क्योंकि मैं फ़ील्ड को अग्रिम करने और आइटम को सहेजने के लिए "एंटर" कुंजी कैप्चर कर रहा हूं?

मुझे पता है कि मैं सहेजने से पहले दूसरी और सभी अतिरिक्त वस्तुओं के लिए अग्रणी नई लाइन को हटा सकता हूं, हालांकि इसका मतलब है कि उपयोगकर्ता को अभी भी प्रत्येक अतिरिक्त आइटम के लिए दूसरी पंक्ति पर सम्मिलन बिंदु प्रस्तुत किया जाएगा।

Answer 1

textarea में एंटर कुंजी का डिफ़ॉल्ट व्यवहार एक नई लाइन जोड़ना है। आपको createOnEnter विधि के भीतर होने वाली इस क्रिया को रोकने की आवश्यकता है, एंटर कुंजी के रूप में कुंजी प्रेस से मेल खाने के बाद e.preventDefault(); जोड़ें।

createOnEnter: function(e) { 
      if (e.keyCode == 13) { 
      e.preventDefault(); 
      items.create(this.newAttributes()); 
      $("#create-item :input").val(''); 
      $("#create-item :input")[0].focus(); 
      }; 
     }