टाइप

Question

पर टेक्स्ट फीड आउट करें यह एक व्यक्तिगत कला प्रोजेक्ट के लिए है। जो मैं मूल रूप से करना चाहता हूं वह एक खाली वेब पेज बना सकता है जहां कोई उपयोगकर्ता टेक्स्ट (जैसे टेक्स्ट-एडिटर) टाइप कर सकता है, लेकिन टेक्स्ट टाइप होने पर फीका हो जाता है।

फीका हुआ, मैं नहीं चाहता कि उपयोगकर्ता को जो पाठ लिखा था उसे देखने की क्षमता हो। इसलिए, मैं पृष्ठभूमि रंग से मेल खाने के लिए फ़ॉन्ट रंग को बस बदलना नहीं चाहता क्योंकि उपयोगकर्ता फिर से टेक्स्ट का चयन कर सकता है।

अभी तक, मैंने एक टेक्स्टरेरा बनाया है कि कीप पर टेक्स्ट इनपुट स्टोर करेगा, जो एक अलग div में दिखाएगा। मैंने जावास्क्रिप्ट में निर्दिष्ट किया है कि जब दर्ज टेक्स्ट एक निश्चित लंबाई तक पहुंच गया है: div बाहर फीका होगा, टेक्स्ट साफ़ करेगा, और वर्तमान टेक्स्ट इनपुट दिखाने के लिए फिर से दिखाएगा। समस्या यह है कि कंसोल के अनुसार, मैं div के मान को साफ़ नहीं कर सकता। इसका कोई मतलब भी है क्या? http://jsfiddle.net/anelec/k40p72xk/5/

एचटीएमएल:

<textarea type='text' id='myinput'></textarea> 
<div><span id="fade"></span></div> 

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

//on keyup store text input into a variable "text" 
    $("#myinput").keyup(function(event) {  
    var text = $("#myinput").val(); 
    console.log("event working"); 
    console.log(text); 

    //show values of "text" variable in id "fade" 
    $("#fade").text(this.value); 
    var fade = $("#myinput").val(); 

    //function to clear text value of id "fade" 
    function cleartext(){ 
    document.getElementById("#fade").value=""; 
    } 

    //clear text value of id "fade" after 15 letters 
    if (fade.length >=15) { 
    $("#fade").fadeOut(200); 
    cleartext(); 
    } 

    //show the incoming text input somehow 
    if (fade.length <=15) { 
    $("#fade").fadeIn("fast"); 
    } 
    }); 

कृपया मुझे बताएं कि वहाँ एक बेहतर तरीका है कि मैं इस दृष्टिकोण कर सकते हैं करते हैं

यहाँ एक बेला है।

Answer 1

यदि मैं आपको सही ढंग से समझता हूं, तो यह काम करना चाहिए। आप मूल्य के बजाय आंतरिक HTML का उपयोग करना चाहेंगे।

बदलने का प्रयास करें:

function cleartext(){ 
    document.getElementById("#fade").value=""; 
    } 

इस के लिए

:

function cleartext(){ 
    document.getElementById("#fade").innerHTML=""; 
    } 

आप गैर इनपुट फ़ील्ड के लिए इनपुट फ़ील्ड के लिए value, और innerHTML का उपयोग करें।

---

विकल्प 1:

$("#myinput").keyup(function(event) {  

     var text = $("#myinput").val(); 
     console.log("event working"); 
     console.log(text); 

     $("#fade").text(this.value); 
     var fade = $("#myinput").val(); 


function cleartext(){ 
     document.getElementById("fade").innerHTML=""; 

     // you use value this time because it's input field 
     document.getElementById("myinput").value = ""; 
} 


    if (fade.length >=15) { 
     $("#fade").fadeOut(200); 
     cleartext(); 
    } 


    if (fade.length <=15) { 
      $("#fade").fadeIn("slow"); 
    } 



}); 

---

विकल्प 2: इस उदाहरण से एलेक्स CASSEDY - अगर इसके The Better उत्तर, उसे क्रेडिट और मेरा नहीं दे, मैं बस एक निर्धारित ऐसा करने पर यह काम करता है। इस तरह

$("#myinput").keyup(function(event) {  

     var text = $("#myinput").val(); 
     console.log("event working"); 
     console.log(text); 

     $("#fade").text(this.value); 
     var fade = $("#myinput").val();  

    // Keep track of how many sets of 15 chars there are 
    var accum = 0; 

    // If the length is divisible by 15 
    if (text.length % 15 == 0) { 
     $("#fade").fadeOut(200, function() { 
      accum ++; 
      // $(this) refers to $("#fade") 
      $(this).val(''); // set the value to an empty string 
     }); 
    } else { 
     $("#fade").fadeIn('fast'); 

    } 

    // Use the substring method to get every 15 characters to display in #fade 
    var next = text.substring(fade.length - 15); 

    $("#fade").text(next); 

}); 

Answer 2

कोशिश कुछ:

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

// Keep track of how many sets of 15 chars there are 
var accum = 0; 

// If the length is divisible by 15 
if (text.length % 15 == 0) { 
    $("#fade").fadeOut(200, function() { 
     accum ++; 
     // $(this) refers to $("#fade") 
     $(this).val(''); // set the value to an empty string 
    }); 
} else { 
    $("#fade").fadeIn('fast'); 
} 

// Use the substring method to get every 15 characters to display in #fade 
var start = accum * 15, 
    end = (accum + 1) * 15, 
    next = text.substring(start, end); 

$("#fade").text(next); 

Answer 3

यह निकटतम मैं मिल गया है है

$("#myinput").keyup(function(event) {  
var text = $("#myinput").val(); 
console.log("event working"); 
console.log(text); 

//show values of "text" variable in id "fade" 
$("#fade").text(this.value); 
var fade = $("#myinput").val(); 


if (text.length >=5) { 
    $("#fade").fadeTo(600,0); 
     $(this).val(""); 
    $("#fade").fadeTo(20,1); 
} 

});