मैं

Question

jQuery का उपयोग क्लिक करने के बाद इनपुट पाठ कैसे साफ कर सकते हैं, मैं इनपुट पाठ कैसे साफ कर सकते हैं के बाद मैं एक क्लिक किसने बनाया? डिफ़ॉल्ट रूप से, मूल्य इनपुट क्षेत्र में रहता है।

उदाहरण के लिए, मेरे पास एक इनपुट टेक्स्ट है और मान TEXT है। जब मैं एक क्लिक करते हैं, मैं इनपुट क्षेत्र खाली बनना चाहता हूँ।

Answer 1

करने के लिए वें हटा दें ई डिफ़ॉल्ट पाठ, तत्व क्लिक करने पर:

$('input:text').click(
    function(){ 
     $(this).val(''); 
    }); 

मैं, हालांकि, focus() बजाय उपयोग करने का सुझाव होगा:

$('input:text').focus(
    function(){ 
     $(this).val(''); 
    }); 

कौन सा कुंजीपटल घटनाओं के लिए भी प्रतिक्रिया करता है (टैब कुंजी, उदाहरण के लिए)। इसके अलावा, आप तत्व में placeholder विशेषता इस्तेमाल कर सकते हैं:

<input type="text" placeholder="default text" /> 

कौन सा तत्व का ध्यान केंद्रित पर साफ़ करें, और पुन: दिखाई देगा अगर तत्व खाली/उपयोगकर्ता नहीं है इनपुट कुछ भी बनी हुई है।

Answer 2

अपडेट: मैंने आपकी कहानियां सचमुच "क्लिक" ली, जो मेरे बारे में थोड़ा गूंगा था। आप नीचे दिए गए के सभी में click के लिए focus स्थानापन्न कर सकते हैं अगर आप भी कार्रवाई चाहते हो जब इनपुट है, जो संभावना है करने के लिए उपयोगकर्ता टैब।

अपडेट 2: मेरा अनुमान है कि आप प्लेसहोल्डर करना चाहते हैं; अंत में टिप्पणी और उदाहरण देखते हैं।

---

मूल जवाब:

आप ऐसा कर सकते हैं:

$("selector_for_the_input").click(function() { 
    this.value = ''; 
}); 

... लेकिन यह है कि यह क्या है की परवाह किए बिना पाठ साफ हो जाएगा। आप केवल यह साफ़ करना चाहते हैं, तो यह एक विशिष्ट मूल्य है:

$("selector_for_the_input").click(function() { 
    if (this.value === "TEXT") { 
     this.value = ''; 
    } 
}); 

उदाहरण के लिए, यदि इनपुट एक id है, तुम कर सकते हो:

$("#theId").click(function() { 
    if (this.value === "TEXT") { 
     this.value = ''; 
    } 
}); 

या यह एक साथ एक के रूप में अगर id (जैसे कि, "MyForm") और आप हर रूप क्षेत्र के लिए ऐसा करना चाहते हैं:

$("#myForm input").click(function() { 
    if (this.value === "TEXT") { 
     this.value = ''; 
    } 
}); 

तुम भी प्रतिनिधिमंडल के साथ यह करने के लिए सक्षम हो सकता है:

$("#myForm").delegate("input", "click", function() { 
    if (this.value === "TEXT") { 
     this.value = ''; 
    } 
}); 

यह delegate का उपयोग फॉर्म पर एक हैंडलर को हुक करने के लिए करता है लेकिन प्रत्येक व्यक्तिगत इनपुट में हैंडलर को जोड़ने के बजाय इसे फ़ॉर्म पर इनपुट पर लागू करता है।

---

आप प्लेसहोल्डर करने का प्रयास कर रहे हैं, वहाँ है कि तुलना में यह करने के लिए अधिक है और आप एक अच्छा प्लग में यह करने के लिए खोजने के लिए कर सकते हैं।लेकिन यहाँ मूल बातें है:

HTML:

<form id='theForm'> 
    <label>Field 1: 
    <input type='text' value='provide a value for field 1'> 
    </label> 
    <br><label>Field 2: 
    <input type='text' value='provide a value for field 2'> 
    </label> 
    <br><label>Field 3: 
    <input type='text' value='provide a value for field 3'> 
    </label> 
</form> 

जावास्क्रिप्ट का उपयोग jQuery:

jQuery(function($) { 

    // Save the initial values of the inputs as placeholder text 
    $('#theForm input').attr("data-placeholdertext", function() { 
    return this.value; 
    }); 

    // Hook up a handler to delete the placeholder text on focus, 
    // and put it back on blur 
    $('#theForm') 
    .delegate('input', 'focus', function() { 
     if (this.value === $(this).attr("data-placeholdertext")) { 
     this.value = ''; 
     } 
    }) 
    .delegate('input', 'blur', function() { 
     if (this.value.length == 0) { 
     this.value = $(this).attr("data-placeholdertext"); 
     } 
    }); 

}); 

Live copy

बेशक, आप भी नए placeholder attribute एचटीएमएल 5 से उपयोग कर सकते हैं और केवल करना उपरोक्त यदि आपका कोड उस ब्राउज़र पर चल रहा है जो इसका समर्थन नहीं करता है, तो इस मामले में आप ऊपर दिए गए तर्क को उलटा करना चाहते हैं:

HTML: jQuery के साथ

<form id='theForm'> 
    <label>Field 1: 
    <input type='text' placeholder='provide a value for field 1'> 
    </label> 
    <br><label>Field 2: 
    <input type='text' placeholder='provide a value for field 2'> 
    </label> 
    <br><label>Field 3: 
    <input type='text' placeholder='provide a value for field 3'> 
    </label> 
</form> 

जावास्क्रिप्ट: (। कुडोस placholder feature-detection code के लिए diveintohtml5.ep.io को)

jQuery(function($) { 

    // Is placeholder supported? 
    if ('placeholder' in document.createElement('input')) { 
    // Yes, no need for us to do it 
    display("This browser supports automatic placeholders"); 
    } 
    else { 
    // No, do it manually 
    display("Manual placeholders"); 

    // Set the initial values of the inputs as placeholder text 
    $('#theForm input').val(function() { 
     if (this.value.length == 0) { 
     return $(this).attr('placeholder'); 
     } 
    }); 

    // Hook up a handler to delete the placeholder text on focus, 
    // and put it back on blur 
    $('#theForm') 
     .delegate('input', 'focus', function() { 
     if (this.value === $(this).attr("placeholder")) { 
      this.value = ''; 
     } 
     }) 
     .delegate('input', 'blur', function() { 
     if (this.value.length == 0) { 
      this.value = $(this).attr("placeholder"); 
     } 
     }); 
    } 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 

}); 

Live copy

Answer 3

$("input:text").focus(function(){$(this).val("")}); 

Answer 4

आप व्यवहार की तरह प्लेसहोल्डर की जरूरत है इस

$('#myFieldID').focus(function(){ 
    $(this).val(''); 
}); 

Answer 5

की कोशिश कर सकते। आप इसका इस्तेमाल कर सकते हैं।

$("selector").data("DefaultText", SetYourDefaultTextHere); 
// You can also define the DefaultText as attribute and access that using attr() function 

$("selector").focus(function(){ 
if($(this).val() == $(this).data("DefaultText")) 
    $(this).val(''); 
}); 

Answer 6

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

<input type="text" value="Input Text" onfocus="this.value=''" onblur="(this.value=='')? this.value='Input Text':this.value;" /> 

Demo

Answer 7

यह करने के लिए एक सुंदर तरीका नहीं है: आप खोज बॉक्स के अंदर कुछ भी लिखने अगर इस तरह

<input type="text" value="Search" name="" 
     onfocus="if (this.value == 'Search') {this.value = '';}" 
     onblur="if (this.value == '') {this.value = 'Pesquisa';}"/> 

,, जब क्लिक अंदर नहीं हटाए जाएंगे बॉक्स फिर से।

Answer 8

enter code here<form id="form"> 
<input type="text"><input type="text"><input type="text"> 

<input type="button" id="new"> 
</form> 
<form id="form1"> 
<input type="text"><input type="text"><input type="text"> 

<input type="button" id="new1"> 
</form> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
    $("#new").click(function(){ 
     //alert("fegf"); 
    $("#form input").val(''); 
    }); 

     $("#new1").click(function(){ 
     //alert("fegf"); 
    $("#form1 input").val(''); 
    }); 
}); 
</script> 

Answer 9

कोशिश इस

$("input[name=search-mini]").on("search", function() { 
//do something for search 
}); 

Answer 10

function submitForm() 
{ 
    if (testSubmit()) 
    { 
     document.forms["myForm"].submit(); //first submit 
     document.forms["myForm"].reset(); //and then reset the form values 
    } 
} </script> <body> 
<form method="get" name="myForm"> 

    First Name: <input type="text" name="input1"/> 
    <br/> 
    Last Name: <input type="text" name="input2"/> 
    <br/> 
    <input type="button" value="Submit" onclick="submitForm()"/> 
</form> 

Answer 11

मैं के बाद से मैं एक ही मुद्दा है जो तय हो गया है इस का उपयोग करने की सिफारिश करेंगे।

$('input:text').focus(
    function(){ 
     $(this).val(''); 
    });