ইনপুট ক্ষেত্রে পাঠ্য যুক্ত করুন


উত্তর:


203

    $('#input-field-id').val($('#input-field-id').val() + 'more text');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="input-field-id" />


5
দয়া করে এই প্রশ্নের আমার $('#input-field-id')
উত্তরটিও পড়ুন

2
আমি মনে করি এমন কোনও ফাংশন হওয়া উচিত যা আপনার সাথে ইনপুটটির মান যুক্ত করতে পারে innerHTML
নীল শিপ

109

দুটি বিকল্প আছে। আইমানের পন্থা সবচেয়ে সহজ, তবে আমি এটিতে একটি অতিরিক্ত নোট যুক্ত করব। আপনার সত্যিই jQuery নির্বাচনগুলি ক্যাশে করা উচিত, $("#input-field-id")দুবার কল করার কোনও কারণ নেই :

var input = $( "#input-field-id" );
input.val( input.val() + "more text" );

অন্য বিকল্পটিও .val()একটি যুক্তি হিসাবে একটি ফাংশন নিতে পারে। একাধিক ইনপুটগুলিতে সহজেই কাজ করার সুবিধা রয়েছে:

$( "input" ).val( function( index, val ) {
    return val + "more text";
});

2
'অন্যান্য বিকল্প' পছন্দ - এফপি খুব ভাল।
la

17

আপনি যদি আরও একবার সংযোজন ব্যবহার করার পরিকল্পনা করে থাকেন তবে আপনি একটি ফাংশন লিখতে চাইতে পারেন:

//Append text to input element
function jQ_append(id_of_input, text){
    var input_id = '#'+id_of_input;
    $(input_id).val($(input_id).val() + text);
}

আপনি কেবল এটি কল করার পরে:

jQ_append('my_input_id', 'add this text');

আমি কোনও অনুসন্ধান বাক্সে স্থানধারককে যুক্ত করতে পারি না এবং এটি ব্যবহার করতে চাই এবং ব্যবহারকারী যখন অনুসন্ধান বাক্সে কার্সার রাখেন তখন বাক্সটি সাফ করতে হবে। এটা কি করণীয়?
কেভিন ডব্লিউ।


4

	// Define appendVal by extending JQuery
	$.fn.appendVal = function( TextToAppend ) {
		return $(this).val(
			$(this).val() + TextToAppend
		);
	};
//_____________________________________________

	// And that's how to use it:
	$('#SomeID')
		.appendVal( 'This text was just added' )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<textarea 
          id    =  "SomeID"
          value =  "ValueText"
          type  =  "text"
>Current NodeText
</textarea>
  </form>

আচ্ছা এই উদাহরণটি তৈরি করার সময় আমি কিছুটা বিভ্রান্ত হয়ে পড়েছিলাম। " ভ্যালু টেক্সট " বনাম> বর্তমান নোডেক্সট < মান মানটির.val() ডেটাতে চালিত হওয়ার কথা নয় ? যাইহোক আমি এবং আপনি আমাকে তাড়াতাড়ি বা পরে পরিষ্কার করতে পারেন।

তবে আপাতত বিষয়টি হ'ল:

ফর্ম ডেটা নিয়ে কাজ করার সময় .val () ব্যবহার করুন ।

ট্যাগের মধ্যে বেশিরভাগ পঠনযোগ্য ডেটা ব্যবহার করার সময় .text () বা ব্যবহার করুনকরার সময় পাঠ্য সংযোজন .append () ব্যবহার করুন।


1
এটি কি প্রশ্নের উত্তরটির জন্য আরও কিছু নতুন যোগ করে? আমি বুঝতে পেরেছি আপনি কেবল একটি এক্সটেনশান করছেন তবে বেশ কিছু সময়ের জন্য এটির উত্তর দেওয়া হয়েছে। কেবলমাত্র নিশ্চিত করতে চান যে এসওয়ের মান ধরেছে।
কেভিন ব্রাউন

1
যত্ন নেওয়ার জন্য ধন্যবাদ - আমি এটি পছন্দ করি। তবে হ্যাঁ আপনি ঠিক বলেছেন যে সারমর্মটি একই রকম থাকে। তবে আমি যখন বর্তমান উত্তরগুলি হজম করলাম তখন অনুভব করলাম শৈলী এবং বাস্তবায়ন সম্পর্কে কিছুটা করা যেতে পারে। আমি পোস্টটি কিছু সম্পাদনা করা যায় কিনা তা আমি প্রথমে যাচাই করেছিলাম, তবে শেষ পর্যন্ত আমি ভেবেছিলাম নতুন একটি তৈরি করা ভাল। সুতরাং নতুন কি: * আপনি ছিটানো চালাতে পারেন। * এক্সটেনশনটি স্ব-ডকুমেন্টিং কোড লেখার পথে অনেক বেশি সহায়তা করে, যখন খুব বেশি পরিমাণে মনোভাবকে বিভ্রান্ত না করে।
নাদু

0
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style type="text/css">
        *{
            font-family: arial;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <button id="more">More</button><br/><br/>
    <div>
        User Name : <input type="text" class="users"/><br/><br/>
    </div>
    <button id="btn_data">Send Data</button>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#more').on('click',function(x){
                var textMore = "User Name : <input type='text' class='users'/><br/><br/>";
                $("div").append(textMore);
            });

            $('#btn_data').on('click',function(x){
                var users=$(".users");
                $(users).each(function(i, e) {
                    console.log($(e).val());
                });
            })
        });
    </script>
</body>
</html>

আউটপুট এখানে চিত্র বর্ণনা লিখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.