ركن لغات البرمجه : :: لغات البرمجه php و asp و Ajax و Java و غيرها

jQuery: إضافة عناصر جديدة لحقل نصي

صورة 'Abu Rayane' الرمزية
Abu Rayane
:: عضو نشيط ::
تاريخ الإنضمام: 25 - 06 - 2011
رقم العضوية : 98953
المشاركات: 278
الإجابات المقدمة: 15
قديمة 27 - 12 - 2016, 07:58
المشاركة 1
نشاط Abu Rayane
  • قوة السمعة : 61
  • الإعجاب: 164
    افتراضي jQuery: إضافة عناصر جديدة لحقل نصي


    السلام عليكم ورحمة الله وبركاته

    درس كيفية إضافة عناصر جديدة لحقل نصي

    DEMO

    HTML
    رمز PHP:

    <div class="category">
      
    <
    textarea cols="50" rows="4" class="search" readonly></textarea>

      <
    ul class="list">
       <
    label>
       <
    li>
        <
    input name="tel" id="tel" type="checkbox" value="Telephone">Telephones
        
    </li>
        </
    label>
        
        <
    label for="voiture">
        <
    li>
        <
    input type="checkbox" id="voiture" value="Voitures">Voitures
        
    </li>
        </
    label>
            
        <
    label for="vetements">
        <
    li>
        <
    input type="checkbox" id="vetements" value="Vetements">Vetements
        
    </li>
        </
    label>
      </
    ul>
    </
    div

    CSS:

    رمز PHP:
    ul.city {
      list-
    style-typenone;
    }

    .
    city {
      
    width200px;
      
    height100px;
      
    overflow-yscroll;
      
    overflow-xhidden;
      
    text-transformcapitalize// first letter in uppercase
    }

    .
    search {
      
    text-transformcapitalize// first letter in uppercase
      
    }

    .list {
      
    cursorpointer;
      
    displaynone;
      list-
    style-typenone;
    }

    {
      
    text-decorationnone;


    jQuery:

    رمز PHP:
    /*

    For any bug or further questions, please let me know on: [email protected]

    Enjoy the code

    */


    $('.list').click(function(e) {
            
    // get value from textarea to add items to it
            
    var value = $('.search').val();
            var 
    isChecked false;
           var 
    target = $(e.target);
           
    //console.log(target);
        
        /* Output: 
        [li]
        [input=#tel]
        */
            
        
    var getAttr    target.closest('input');
        
    console.log(getAttr);
        
    /* Output: 
        [input#tel, prevObject: jQuery.fn.init[1]] 
        [prevObject: jQuery.fn.init[1]]
        
        First has an input with id, and second has nothing (no id no class,.. no attribute), so get the length
        */
        
        
    var attrLen    getAttr.length;
        
    //console.log(attrLen);
        /* Output:
        1 ==> This is for input#tel
        0 ==> and this for Object
        */

            
    if(attrLen 0){
            var 
    getID    getAttr.closest('input').attr('id');
          
    //console.log('idd '+getID);
          
          // get value using the items ID
          
    var getTxt    = $('#'+getID).val();
          
    //console.log('tt '+getTxt);
          
          // we need to check if the item is checked or not (Checked: add it to the textarea, unchecked remove it from textarea)
          
    var status    = $('#' getID).is(":checked");
      
    //console.log(status);
      
      // if true add item to textarea
      
    if(status === true){
          $(
    '.search').val(value getTxt+',');
      } else {
      
      var 
    valSpl value.split(',');
      
    //console.log(valSpl);
      
      // check if this index exists in the list
      
    var ind2 valSpl.indexOf(getTxt);
        
    //console.log(ind2);
      
      // then remove it
        
    valSpl.splice(ind21);
      
        
    //console.log('Third '+valSpl);
      
      // apply new values to search textarea
      
    $('.search').val(valSpl);

      } 
    // end if(status === false){
          
        
    // end if(attrLen > 0){


     
    }); // end click
     
     
    $('.search').on('click', function(){
        $(
    '.list').show();
    });


    // hide the list
    $(document).on('click', function(e){

    var 
    target e.target;
    //console.log(target);
    /* Cases:
    Case1: Click inside the textarea:
    <textarea cols="50" rows="4" class="search"></textarea>

    Case2: Click inside the list:
    <input name="tel" id="tel" type="checkbox" value="Telephone">

    Case3: Click outside the category class:
    Will return everything inside the <html></html>
    */

    // find the category class inside the target
    var find = $(e.target).find('.category');
    //console.log(find);
    /* Outputs
    Case1: [prevObject: jQuery.fn.init[1]]
    length will be 0

    Case2: [prevObject: jQuery.fn.init[1]]
    length will be 0

    Case3: [ul.category, prevObject: jQuery.fn.init[1]]
    length will be 1
    */

    //console.log(find.length);

    // since we did not click inside the category class (length is 0, we clicked outside the category), we need to hide the list

    if(find.length 0){
        $(
    '.list').hide();
    }

    }); 
    // end document click 
    http://www.alfirdaous.com

    السلام عليكم ورحمة الله وبركاته،
    نبحث عن مساعدين (مصممين، مبرمجين، إدخال بيانات، كاتبي مقالات،...) في إدارة موقع الفردوس، لمن يهمه الأمر، المرجو الإتصال بالإدارة من هنا.

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

    I do not code for others
    I do not answer without codes
    I do not update the 3rd party codes
    All my codes bug, do not copy / paste them
    اضافة رد
    العلامات المرجعية

    jQuery: إضافة عناصر جديدة لحقل نصي


    مبتدأ برمجة يسأل عن لاب توب مناسب 64 دروس في لغة ++c الدوال و تمرير القيم الافتراضية

    أدوات الموضوع
    طرق العرض



    الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 22:19.
    المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
    فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
    التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

    جميع الحقوق محفوظة Traidnt 2015
    • 00966920020037
    • 00966138648289
    • 2051033691
    Powered by vBulletin® Version 3.8.7 .Copyright ©2000 - 2017, Jelsoft Enterprises Ltd
    SEO by vBSEO ©2011, Crawlability, Inc.