यदि आप इसे पढ़ रहे हैं, तो मुझे आशा है कि आप अच्छे होंगे!

मेरे पास चीसी, मूल कोड संपादक है और मैं textarea के निचले भाग में स्थान जोड़ने के लिए सर्वोत्तम दृष्टिकोण का पता लगाने की कोशिश कर रहा हूं ताकि उपयोगकर्ता हमेशा टाइप नहीं कर रहा हो टेक्स्टरेरा के बहुत नीचे, उदाहरण के लिए, एक बार चीजें ओवरफ्लो/स्क्रॉल होने लगती हैं। मुझे लगता है कि कोडपेन के समान ही कुछ :)

यह एक मुश्किल है क्योंकि मेरे पास दो पूरी तरह से स्थित divs, साथ-साथ (लाइन नंबर और लाइन, क्रमशः) हैं और मैंने स्क्रॉलिंग को सिंक्रोनाइज़ किया है। अब, उसके ऊपर, कुछ जगह जोड़ने की आवश्यकता जोड़ें, और मैं फंस गया हूँ!

यहां एक विस्तृत कोडपेन मॉक अप है जो मेरा कार्य-प्रगति कोड दिखाता है: CodePen: Textarea लाइन नंबरों के साथ< /ए>

$(document).ready(function() {
  $(".bulk-editor .editor").bind("input propertychange", function() {
    var lineCount = $(this).val().split("\n").length;
    $(".lines").text('');
    for (var i = 0; i < lineCount; ++i) {
      $(".lines").append("<span class='linenum'></span>");
    }
  });

  $('.editor').scroll(function() {
    var top = $(this).scrollTop();
    $('.lines').scrollTop(top);
  });

});
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.container {
  height: 300px;
  padding: 16px 0;
}

.bulk-editor {
  position: relative;
  height: 100%;
  width: 100%;
  counter-reset: matches;
  outline: none;
  font-family: monospace;
  border: 1px solid #ced4da;
  overflow: hidden;
}

.bulk-editor-wrapper {
  position: relative;
  top: 0;
  padding-top: 4px;
  height: 100%;
  width: 100%;
}

.lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  line-height: 1.2;
  font-size: 1rem;
  user-select: none;
  outline: none;
  border: none;
  z-index: 2;
  background: #e4e4e4;
  overflow: hidden;
  padding-top: inherit;
}

.linenum {
  display: block;
  width: 40px;
  text-align: right;
  color: #808080;
  line-height: inherit;
  font-size: inherit;
  &::before {
    counter-increment: matches;
    content: counter(matches);
  }
  padding-right: 10px;
}

.editor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 60px !important;
  white-space: pre-wrap;
  outline: none;
  background-color: white;
  border: none;
  resize: none;
  margin: 0;
  color: grey;
  line-height: 1.2;
  font-size: 1rem;
  overflow: auto;
  padding-top: inherit;
  &:focus {
    color: black;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Refer to this article https://www.codeproject.com/Tips/5163219/HTML-Line-Numbering-using-textarea -->
<div class="container">
  <div class="bulk-editor">
    <div class="bulk-editor-wrapper">
      <div class="lines"></div>
      <textarea class="editor" rows="10" autocorrect="off" spellcheck="false"></textarea>
    </div>
  </div>
  </div>

How Can I Add Bottom Padding...

If I Simply Add Bottom Padding

मैं सही दृष्टिकोण निर्धारित करने के लिए संघर्ष कर रहा हूं। क्या यह शुद्ध CSS का उपयोग करके किया जा सकता है या क्या अधिक जटिल स्क्रॉल ईवेंट का उपयोग करके JavaScript समाधान आवश्यक है?

अगर किसी ने भी इसी तरह की आवश्यकता का अनुभव किया है और एक समझदार दृष्टिकोण जानता है, तो मैं सभी कान हूं। बहुत धन्यवाद!

0
bobleeswagger 14 अप्रैल 2020, 23:25

2 जवाब

सबसे पहले, आप .lines और .editor, यानी 20px;

.lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  line-height: 1.2;
  font-size: 1rem;
  user-select: none;
  outline: none;
  border: none;
  z-index: 2;
  background: #e4e4e4;
  overflow: hidden;
  padding-top: inherit;
  padding-bottom: 20px;
}

.editor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 60px !important;
  white-space: pre-wrap;
  outline: none;
  background-color: white;
  border: none;
  resize: none;
  margin: 0;
  color: grey;
  line-height: 1.2;
  font-size: 1rem;
  overflow: auto;
  padding-top: inherit;
  padding-bottom: 20px;
  &:focus {
    color: black;
  }
}

फिर, आप जांचते हैं कि आप नीचे स्क्रॉल करने के लिए संपादक की अंतिम पंक्ति में हैं या नहीं।
input propertychange इवेंट के फंक्शन के अंदर, इसे जोड़ें:

if (this.selectionStart === this.value.length) {
  $(this).scrollTop($(this).prop("scrollHeight"));
}
0
Azametzin 14 अप्रैल 2020, 23:39
धन्यवाद @Azametzin! मैं वास्तव में समय निकालने के लिए आपकी सराहना करता हूं। मैंने मूल रूप से यह कोशिश की लेकिन पाया कि जब मैंने ऐसा किया तो टेक्स्टरेरा की सामग्री क्लिप हो रही थी और लाइन नंबर अबाधित थे - चीजें बस लाइन नहीं थीं। इस कोडपेन पर ऊपर स्क्रॉल करने का प्रयास करें और आपको क्लिप देखने में सक्षम होना चाहिए: लाइन नंबर Azametzin संस्करण के साथ Textarea ए>। मैं फ़ायरफ़ॉक्स में परीक्षण कर रहा हूं।
 – 
bobleeswagger
15 अप्रैल 2020, 00:25
मुझे अभी पता चला है कि टेक्स्टरेरा में पैडिंग फ़ायरफ़ॉक्स में अलग तरह से व्यवहार करती है, इसलिए एक और दृष्टिकोण की आवश्यकता है। मैं इसे कुछ दिनों में हल करने का प्रयास करूंगा।
 – 
Azametzin
15 अप्रैल 2020, 04:44
धन्यवाद @Azametzin! आप कमाल हैं। मैं अपनी ओर से भी किसी न किसी चीज पर काम करना जारी रख रहा हूं। जैसा कि अक्सर होता है, इसमें कुछ रैपर नरक शामिल हो सकते हैं :) उम्मीद है, हम कुछ ऐसा लेकर आ सकते हैं जो दूसरों की मदद कर सके। एक स्वीकार्य समाधान में उपयोगकर्ताओं के पास उस स्थिति तक स्क्रॉल करने की क्षमता होगी जहां वे टाइप कर रहे हैं। स्क्रॉल को हाईजैक करने की कोई आवश्यकता नहीं है, लेकिन यह सुनिश्चित करना कि वे नीचे नहीं फंस गए हैं, बस मैं ढूंढ रहा हूं। मेरा उपयोग मामला इस मायने में अद्वितीय है कि उपयोगकर्ताओं को अधिकतम # लाइनें दर्ज करने को मिलती हैं, इसलिए एक समाधान जो लाइन नंबरों को पूर्व-पॉप्युलेट करता है, हमारे पक्ष में काम कर सकता है।
 – 
bobleeswagger
15 अप्रैल 2020, 19:24

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

function updateSize(){
    var code = document.getElementById("code"); //the textarea
    var codeHighlight = document.getElementById("codeHighlight"); //the highlighted code
    var longestLine = 0;
    for (var i = 0; i < code.value.split("\n").length; i++) {
        if(code.value.split("\n")[i].length > longestLine){
            longestLine = code.value.split("\n")[i].length;
        }
    }
    code.style.width = (longestLine+2) + "ch";
    code.style.height = 13.33333*1.15*(code.value.split("\n").length+1) + "px";

    codeHighlight.style.width = (longestLine+3) + "ch";
    if(longestLine == 0 && code.value.split("\n").length == 1){
        //make it visible if there is no text
        code.style.width = "100px";
        code.style.height = "100px";
    }
}
document.onkeyup = updateSize();

मेरे पास हाइलाइट किए गए सिंटैक्स वाले div के शीर्ष पर एक छोटा टेक्स्टरेरा है। उपयोगकर्ता द्वारा एक कुंजी दबाए जाने के ठीक बाद, कोड टेक्स्ट को कवर करने के लिए टेक्स्ट क्षेत्र के आकार को बदल देता है। मुझे अन्य सीएसएस के शीर्ष पर निम्नलिखित सीएसएस को निर्दिष्ट करने में भी मदद मिली:

#code{
    outline: none;
    overflow: hidden;
    resize: none;
}

जहां #code textarea है।

मेरे पास यहां और यहां। सभी कोड प्रासंगिक नहीं हैं, लेकिन फ़ंक्शन अपडेट हाइलाइट () और डिव एडिटमोड देखें।

आशा है कि यह मददगार था!

0
Kira 15 अप्रैल 2020, 03:10
@Kira साझा करने के लिए धन्यवाद! मैं आपके समय की सराहना करता हूं। मेरे मामले में, मेरे पास लाइन नंबर हैं जिन्हें मैं कोड के साथ रखना चाहता हूं। मैं स्क्रॉल को सिंक्रनाइज़ कर रहा हूं, अन्य से अधिक, उन पंक्तियों के लिए। क्या आप अपने सुझाव में कुछ संदर्भ जोड़ सकते हैं और उस निचले पैडिंग को प्राप्त करने के लिए इसका उपयोग कैसे किया जा सकता है, मैं अभी भी कोड और लाइन नंबरों को पंक्तिबद्ध करते हुए पूरा करने की कोशिश कर रहा हूं जिन्हें सिंक्रोनाइज़ किया जा सकता है? एक बार फिर धन्यवाद!
 – 
bobleeswagger
15 अप्रैल 2020, 00:37
@Kira साझा करने के लिए धन्यवाद। यह बहुत अच्छा है। मैं आपके कोड का अध्ययन करने जा रहा हूं और देखूंगा कि क्या कुछ चीजें हैं जिन्हें मैं अपने उपयोग के मामले में लागू करना बुद्धिमानी हूं। मैं अपने स्वयं के एक संशोधित संस्करण पर काम कर रहा हूं जो कम से कम उपयोगकर्ता को हमेशा रिक्त स्थान रखने की क्षमता दे सकता है नीचे (यदि वे इसे चाहते हैं)। ऐसा लगता है कि हर संपादक एक पूरी तरह से अलग उपयोग का मामला है, लेकिन मैं निश्चित रूप से कुछ से सीख सकता हूं, भले ही वह 1: 1 न हो। बहुत धन्यवाद!
 – 
bobleeswagger
15 अप्रैल 2020, 03:29