Блог

Главная - Вопросы по программированию - Как добавить нажмите, чтобы переключить регистр букв, и нажмите, чтобы ввести с помощью javascript

Как добавить нажмите, чтобы переключить регистр букв, и нажмите, чтобы ввести с помощью javascript

#javascript #html #jquery

Вопрос:

Я хочу создать функцию типа ключевых слов с помощью java-скрипта. Возможно ли это? Я хочу, чтобы, когда я нажимаю на любую букву или цифру, она появляется в текстовой области, а при нажатии на кнопку изменить регистр переключается регистр букв. Вот мои html-коды.

 <html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
.btn{border:1px solid black;padding:5px;display: inline-block;}
textarea{width:100%;height:80px}
.slr{display:none;}
.clicked{ border : 3px solid #000;}
<style> </style> </head> 
<body>
<textarea id="text1"></textarea>
<br>

<span class="btn" id="btn-1" data-showbutton="1"> Letter</span>| <span class="btn" id="btn-2" data-showbutton="2">Number</span>


 <div class="slr" data-button="1"> 
    <center><span id="switch_case" class="btn">Change case</span></center>
<span class="btn">A</span>
<span class="btn">B</span>
<span class="btn">C</span>
<span class="btn">D</span>
<span class="btn">E</span>
<span class="btn">F</span>
<span class="btn">G</span>
<span class="btn">H</span>
<span class="btn">I</span>
<span class="btn">J</span>
<span class="btn">K</span>
<span class="btn">L</span>
<span class="btn">M</span>
<span class="btn">N</span>
<span class="btn">O</span>
<span class="btn">P</span>
<span class="btn">Q</span>
<span class="btn">R</span>
<span class="btn">S</span>
<span class="btn">T</span>
<span class="btn">U</span>
<span class="btn">V</span>
<span class="btn">W</span>
<span class="btn">X</span>
<span class="btn">Y</span>
<span class="btn">Z</span>


 </div>
 <div data-button="2"  class="slr">
<span class="btn">0</span>
<span class="btn">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<span class="btn">4</span>
<span class="btn">5</span>
<span class="btn">6</span>
<span class="btn">7</span>
<span class="btn">8</span>
<span class="btn">9</span>


 </div>


<script type="text/javascript">
$('#btn-1,#btn-2').click(function(){
    var btn = $(this).data("showbutton");
    showButtonText(btn);
});

function showButtonText(btn) {    
    // reset
    $('.text').hide();      
    $('[data-button]').hide(); 
    $('[data-showbutton]').removeClass('clicked');
        
    // only show the selected
    $('[data-showbutton='   btn   ']').addClass('clicked');  
    $('[data-button='   btn   ']').show();
}
</script> </body></html>

Если это возможно, пожалуйста, добавьте эти две функции и объясните это. Я хочу использовать в Google blogger и его поддержке только языки интерфейса.

Комментарии:

1. Почему бы не принять любой из приведенных ниже ответов? Или, по крайней мере, прокомментируйте их…

Ответ №1:

Используйте делегирование событий и добавьте прослушиватель щелчка в slr элемент. Затем добавьте текст, на который вы нажали textarea .

Обратите внимание, что также вы можете создать цикл for и добавить прослушиватель ко всему span, но при делегировании событий вы добавляете только одного слушателя, и цикл не требуется.

И для случая переключения используйте этот код:

 $("#switch_case").click((e) => {
    $("div[data-button='1'] > span.btn").each((t, elm) => {
        if (elm.innerText == elm.innerText.toLowerCase())
            elm.innerText = elm.innerText.toUpperCase();
        else
            elm.innerText = elm.innerText.toLowerCase();
    })
})

Вот рабочий образец:

 $('#btn-1,#btn-2').click(function () {
     var btn = $(this).data("showbutton");
     showButtonText(btn);
 });

 $(".slr> span.btn").click((e) => {
     $("#text1").val($("#text1").val()   e.target.innerText);

 })

$("#switch_case").click((e) => {
    $("div[data-button='1'] > span.btn").each((t, elm) => {
        if (elm.innerText == elm.innerText.toLowerCase())
            elm.innerText = elm.innerText.toUpperCase();
        else
            elm.innerText = elm.innerText.toLowerCase();
    })
})

 function showButtonText(btn) {
     // reset
     $('.text').hide();
     $('[data-button]').hide();
     $('[data-showbutton]').removeClass('clicked');

     // only show the selected
     $('[data-showbutton='   btn   ']').addClass('clicked');
     $('[data-button='   btn   ']').show();
 } 
 .btn {
            border: 1px solid black;
            padding: 5px;
            display: inline-block;
        }

        textarea {
            width: 100%;
            height: 200px
        }

        .slr {
            display: none;
        }

        .clicked {
            border: 3px solid #000;
        } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<textarea id="text1"></textarea>
<br>

<span class="btn" id="btn-1" data-showbutton="1"> Letter</span>| <span class="btn" id="btn-2" data-showbutton="2">Number</span>

<div class="slr" data-button="1">
    <center><span id="switch_case" class="btn">Change case</span></center>
    <span class="btn">A</span><span class="btn">B</span><span class="btn">C</span><span class="btn">D</span><span class="btn">E</span><span class="btn">F</span><span class="btn">G</span><span class="btn">H</span><span class="btn">I</span><span class="btn">J</span><span class="btn">K</span><span class="btn">L</span><span class="btn">M</span><span class="btn">N</span><span class="btn">O</span><span class="btn">P</span><span class="btn">Q</span><span class="btn">R</span><span class="btn">S</span><span class="btn">T</span><span class="btn">U</span><span class="btn">V</span><span class="btn">W</span><span class="btn">X</span><span class="btn">Y</span><span class="btn">Z</span>


</div>
<div data-button="2" class="slr">
    <span class="btn">0</span><span class="btn">1</span><span class="btn">2</span><span class="btn">3</span><span class="btn">4</span><span class="btn">5</span><span class="btn">6</span><span class="btn">7</span><span class="btn">8</span><span class="btn">9</span>
</div>

Комментарии:

1. Да, @alireza-ахмади при нажатии на изменение регистра — от нижнего к верхнему и от верхнего к нижнему регистру

2. @mayonkbora Хорошо, проверьте мой обновленный ответ. Все в порядке? Ваша проблема решена?

Ответ №2:

Назначьте an event listener ВСЕМ элементам диапазона, которые действуют как кнопки для ввода. Используйте обработчик события, чтобы найти текст в пределах промежутка и добавить в текстовую область следующим образом:

 $('#btn-1,#btn-2').click(function(){
    var btn = $(this).data("showbutton");
    showButtonText(btn);
});

function showButtonText(btn) {    
    // reset
    $('.text').hide();      
    $('[data-button]').hide(); 
    $('[data-showbutton]').removeClass('clicked');
        
    // only show the selected
    $('[data-showbutton='   btn   ']').addClass('clicked');  
    $('[data-button='   btn   ']').show();
}

const casechanger=document.querySelector('div.slr > center > span.btn');

/*
  obtain a nodelist of all `span` elements that act as buttons for input.
  Assign a simple event handler to each span that adds the textContent from
  the span to the output textarea.
*/
document.querySelectorAll('div.slr > span.btn').forEach( span=>{
  span.addEventListener('click',function(e){
    let text=document.querySelector('textarea#text1')
    text.value =casechanger.dataset.case==1 ? this.textContent.toLowerCase() : this.textContent.toUpperCase();
  });
});

/*
  Using the same dataset attribute to modify the content displayed within the
  span elements that act as input.
*/
casechanger.addEventListener('click',function(e){
  //toggle the dataset attribute between 1 and 0
  this.dataset.case=1-this.dataset.case;
  // find all span elements and change case of contents based upon value of dataset attribute
  this.parentNode.parentNode.querySelectorAll('span.btn:not([id="switch_case"])').forEach(span=>{
    span.textContent=casechanger.dataset.case==1 ? span.textContent.toLowerCase() : span.textContent.toUpperCase();
  })
}); 
 .btn{border:1px solid black;padding:5px;display: inline-block;}
textarea{width:100%;height:200px}
.slr{display:none;}
.clicked{ border : 3px solid #000;}

.btn{cursor:pointer} 
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<textarea id="text1"></textarea>
<br>

<span class="btn" id="btn-1" data-showbutton="1"> Letter</span> | <span class="btn" id="btn-2" data-showbutton="2">Number</span>


<div class="slr" data-button="1"> 
  <center><span id="switch_case" class="btn" data-case=0>Change case</span></center>
  <span class="btn">A</span>
  <span class="btn">B</span>
  <span class="btn">C</span>
  <span class="btn">D</span>
  <span class="btn">E</span>
  <span class="btn">F</span>
  <span class="btn">G</span>
  <span class="btn">H</span>
  <span class="btn">I</span>
  <span class="btn">J</span>
  <span class="btn">K</span>
  <span class="btn">L</span>
  <span class="btn">M</span>
  <span class="btn">N</span>
  <span class="btn">O</span>
  <span class="btn">P</span>
  <span class="btn">Q</span>
  <span class="btn">R</span>
  <span class="btn">S</span>
  <span class="btn">T</span>
  <span class="btn">U</span>
  <span class="btn">V</span>
  <span class="btn">W</span>
  <span class="btn">X</span>
  <span class="btn">Y</span>
  <span class="btn">Z</span>
</div>
<div data-button="2"  class="slr">
  <span class="btn">0</span>
  <span class="btn">1</span>
  <span class="btn">2</span>
  <span class="btn">3</span>
  <span class="btn">4</span>
  <span class="btn">5</span>
  <span class="btn">6</span>
  <span class="btn">7</span>
  <span class="btn">8</span>
  <span class="btn">9</span>
</div>

Ответ №3:

 $('#btn-1,#btn-2').click(function(){
    var btn = $(this).data("showbutton");
    showButtonText(btn);
});

$("#switch_case").click(()=>{
    document.querySelectorAll('div.slr > span.btn').forEach( span=>{
        if(/d/.test(span.textContent) == false){

            var result = span.textContent == span.textContent.toUpperCase();
            if(result == true){
                span.textContent = span.textContent.toLowerCase();
            }else{
                span.textContent = span.textContent.toUpperCase();
            }
        }
    })
})
function showButtonText(btn) {    
    // reset
    $('.text').hide();      
    $('[data-button]').hide(); 
    $('[data-showbutton]').removeClass('clicked');
        
    // only show the selected
    $('[data-showbutton='   btn   ']').addClass('clicked');  
    $('[data-button='   btn   ']').show();
}

/*
  obtain a nodelist of all `span` elements that act as buttons for input.
  Assign a simple event handler to each span that adds the textContent from
  the span to the output textarea.
*/
document.querySelectorAll('div.slr > span.btn').forEach( span=>{
  span.addEventListener('click',function(e){
    document.querySelector('textarea#text1').value =this.textContent
  });
}) 
 .btn{border:1px solid black;padding:5px;display: inline-block;}
textarea{width:100%;height:200px}
.slr{display:none;}
.clicked{ border : 3px solid #000;}

.btn{cursor:pointer} 
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<textarea id="text1"></textarea>
<br>

<span class="btn" id="btn-1" data-showbutton="1"> Letter</span> | <span class="btn" id="btn-2" data-showbutton="2">Number</span>


<div class="slr" data-button="1"> 
  <center><span id="switch_case" class="btn" data-case=0>Change case</span></center>
  <span class="btn">A</span>
  <span class="btn">B</span>
  <span class="btn">C</span>
  <span class="btn">D</span>
  <span class="btn">E</span>
  <span class="btn">F</span>
  <span class="btn">G</span>
  <span class="btn">H</span>
  <span class="btn">I</span>
  <span class="btn">J</span>
  <span class="btn">K</span>
  <span class="btn">L</span>
  <span class="btn">M</span>
  <span class="btn">N</span>
  <span class="btn">O</span>
  <span class="btn">P</span>
  <span class="btn">Q</span>
  <span class="btn">R</span>
  <span class="btn">S</span>
  <span class="btn">T</span>
  <span class="btn">U</span>
  <span class="btn">V</span>
  <span class="btn">W</span>
  <span class="btn">X</span>
  <span class="btn">Y</span>
  <span class="btn">Z</span>
</div>
<div data-button="2"  class="slr">
  <span class="btn">0</span>
  <span class="btn">1</span>
  <span class="btn">2</span>
  <span class="btn">3</span>
  <span class="btn">4</span>
  <span class="btn">5</span>
  <span class="btn">6</span>
  <span class="btn">7</span>
  <span class="btn">8</span>
  <span class="btn">9</span>
</div>

Я сделал регистр изменения кликабельным, а при нажатии меняю регистр клавиатуры и т.д.

Ответ №4:

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

 // GET ELEMENTS
const lettersButton = document.getElementById('lettersButton');
const numbersButton = document.getElementById('numbersButton');
const textArea = document.getElementById('textArea');
const caseButton = document.getElementById('caseButton');
const lettersDiv = document.getElementById('lettersDiv');
const numbersDiv = document.getElementById('numbersDiv');

// DEFINE LETTERS AND NUMBERS
const letters = 'abcdefghijklmnopqrstuvwxyz';
const numbers = '0123456789';

// CREATE AUXILIARY VARIABLES
let isUpperCase = false;

// CREATE HANDLER FOR CLICK EVENTS
const onClickHandler = (e) => {
  textArea.value  = e.target.innerText;
};

// CREATE TOGGLE CASE FUNCTION
const toggleCase = () => {
  isUpperCase = !isUpperCase;
  createKeys(isUpperCase ? letters.toUpperCase() : letters, lettersDiv);
};

// CREATE SWITCH KEYBOARD FUNCTION
const switchKeyboard = (letters) => {  
  if (letters) {
    lettersDiv.style.display = null;
    numbersDiv.style.display = 'none';
  } else {
    lettersDiv.style.display = 'none';
    numbersDiv.style.display = null;
  }
};

// CREATE KEYS FUNCTION
const createKeys = (source, target) => {
  target.querySelectorAll(':scope > span').forEach((element) => {
    element.remove();
  });

  source.split('').forEach((char) => {
    const key = document.createElement('SPAN');
  
    key.classList.add('key');
    key.innerText = char;
    key.addEventListener('click', onClickHandler);
  
    target.appendChild(key);
  });
};

// ADD EVENT LISTENERS
lettersButton.addEventListener('click', () => switchKeyboard(true));
numbersButton.addEventListener('click', () => switchKeyboard(false));
caseButton.addEventListener('click', () => toggleCase());

// CREATE AND ADD LETTER KEYS
createKeys(letters, lettersDiv);

// CREATE AND ADD NUMBER KEYS
createKeys(numbers, numbersDiv);

// SWITCH KEYBOARD
switchKeyboard(true); 
 .key {
  border: 1px solid black;
  padding: 5px;
  display: inline-block;
}

.text {
  width:100%;
  height:200px
} 
 <html>
<body>
  <textarea id='textArea' class="text"></textarea>

  <br>

  <span id="lettersButton" class="key">Letters</span>
  <span>amp;nbsp|amp;nbsp</span>
  <span id="numbersButton" class="key">Numbers</span>


  <div id="lettersDiv"> 
    <center>
      <span id="caseButton" class="key">Toggle Case</span>
    </center>
  </div>

  <div id="numbersDiv"></div>
</body>
</html>
Метки: , , ,