निश्चित चौड़ाई तक पहुंचने के बाद टेबल सेल पर इनपुट रोकें?

Question

एक चौड़ाई तक पहुंचने के बाद मैं HTML तालिका कक्ष पर अतिरिक्त इनपुट को रोकना चाहता हूं।

तालिका में एक निश्चित लेआउट, कोई लपेटें और एक विशिष्ट चौड़ाई है। ओवरफ्लो वर्तमान में छिपाने के लिए सेट है।

क्या इनपुट (और अंततः रोकथाम) इनपुट करना संभव है ताकि यह निश्चित चौड़ाई पर रुक जाए ताकि कोई ओवरफ्लो (छुपा या अन्यथा) न हो। मैं वर्तमान में jQuery का उपयोग कर कैरिज रिटर्न फ़िल्टर कर रहा हूं ताकि सेल अतिरिक्त लाइनों तक विस्तारित न हो।

शायद मैं एक HTML तालिका से बहुत ज्यादा पूछ रहा हूँ ...

Answer 1

एक संभव समाधान एक छिपा क्षेत्र में keydown पर सेल सामग्री कॉपी करके इस क्षेत्र के मूल्य की गणना करने के लिए है:

$("table input").on("keydown", function(e) { 
    $("#copy").text(this.value); 

    var width = $("#copy").outerWidth(); 
    console.log("w: " + width); 

    var code = e.keyCode ? e.keyCode : e.which; 
    if (width > 50 && code !== 8 && code !== 49) { 
     return false; 
    } 
}); 

मैंने इस तरह के समाधान के साथ एक पहेली बनाई है: http://jsfiddle.net/scaillerie/hnRjB/2/।

:

एक बिंदु उल्लेखनीय है कि font-family और font-size input में और व्यवस्था सही मान पाने के लिए div में ही होना चाहिए, कि CSS नियम का कारण है

* { 
    font-family: arial; 
    font-size: 1em; 
} 

लेकिन * के बजाय, आपको अपनी आवश्यकताओं के अनुरूप होना चाहिए (उदाहरण के लिए, table input, #copy)।

---

संपादित करें:

बस ध्यान दें कि इस कोड के साथ, उपयोगकर्ता सिर्फ इनपुट लंबाई की तुलना में अधिक प्रवेश कर सकते हैं, लेकिन आप को कॉपी किए गए क्षेत्र के लिए कुछ "लंबे" चरित्र जोड़ सकते हैं क्रम में, चौड़ाई का परीक्षण करें: http://jsfiddle.net/scaillerie/hnRjB/3/।