2014-10-29 3 views
1

В этом викторине, что я делаю, сначала нажмите на текстовое поле, которое вы хотите ввести, затем нажмите кнопку, значение которой вы хотите поместить в поле. Проблема: если я хочу поместить значение abcdefghi в поле. , если я нажимаю на первую кнопку, а затем на второй кнопке более раннее содержимое удаляется.заполнить пробелы викторины

<html> 
<head> 
</head> 

<body><button class="b"></button> 
<button class="a">abc</button> 
<button class="a">def</button> 
<button class="a">ghi</button> 

<div class="fill" id="f1"><input type="text" style="border:" value="">aaa</div> 
<div class="fill" id="f2"><input type="text" value="">bbbb</div> 
<div class="fill" id="f3"><input type="text" value="">ccc</div> 


    <script src="jquery.min.js"></script> 
<script type="text/javascript"> 

var activeFill; 

    $('.fill input').on('click',function() { 
activeFill = $(this); 
}); 

    $('button').on('click',function() { 
    if (activeFill !== 'undefined') { 
    var val = $(this).html(); 
    $(activeFill).val(val); 
    } 
    }); 
    </script> 
    </body> 
    </html> 
+0

вот JSF iddle http://jsfiddle.net/jza48Lt1/ –

ответ

0

Вы заменяете содержимом каждый раз, вы должны добавить содержание, как показано ниже

$('button').on('click',function() { 
    if (activeFill !== 'undefined') { 
    var val = $(this).html(); 
    //$(activeFill).val(val); -- remove this 
    // append content 
    var prevContent = $(activeFill).val(); 
    $(activeFill).val(prevContent + val); 
    } 
    }); 

но выше код будет добавлять повторяющиеся значения, если нажать ту же кнопку дважды, для предотвращения повторного использования ниже кода

$('button').on('click',function() { 
     if (activeFill !== 'undefined') { 
     var val = $(this).html(); 
     //$(activeFill).val(val); -- remove this 
     // append content 
     var prevContent = $(activeFill).val(); 
     if(prevContent.indexOf(val)==-1) // if condition to check if text already present or not 
      $(activeFill).val(prevContent + val); 
     } 
     }); 

EDIT - Как OP хочет CLEAR, и DELETE функциональных кнопок, см следующего кода

HTML -

<button class="delete">DELETE</button> 
<button class="clear">CLEAR</button> 

JQuery

//variable to store last added text 
var lastAddedText = ''; 

$('button.a').on('click',function() { 
      if (activeFill !== 'undefined') { 
      var lastAddedText = $(this).html(); 
      // append content 
      var prevContent = $(activeFill).val(); 
      if(prevContent.indexOf(lastAddedText)==-1) // if condition to check if text already present or not 
       $(activeFill).val(prevContent + lastAddedText); 
      } 
      }); 

$('button.delete').on('click',function() { 
    var val = $(activeFill).val(); 
    val = val.substring(0,val.length-1); 
    $(activeFill).val(val); 
}); 

$('button.clear').on('click',function() { 
    $(activeFill).val(''); 
}); 

JSfiddle Demo

+0

благодарю вас за помощь, но что, если я хочу кнопку удаления, также предположим, что кнопка с классом b является кнопкой удаления. –

+0

удалить весь текст или просто последний введенный текст? –

+0

Последний индекс следует удалить. –

0

Очень просто - вам нужно добавить предыдущее значение:

$(activeFill).val($(activeFill).val() + val); 
Смежные вопросы