Ввод текста в определенное место input
Добрый день. Есть input, текст в который вводится из события click:
<input id="keyboard-input" type="text"> <button type="button" class="key-button-new">1</button> <button type="button" class="key-button-new">2</button> <button type="button" class="key-button-new">3</button> <script> $('.key-button-new').click(function(){ var key = $(this).html(); $("#keyboard-input").focus().val(function(i, val) { return val + key; }); }); </script> Подскажите пожалуйста как вводить в input туда, куда ткнули мышкой? Например ввели слово, а там ошибка, ткнули в место ошибки и исправили с события click. |
Местоположение курсора нашел, а вот как заставить его туда писать, не знаю:
$('.key-button-new').click(function(){ var key = $(this).html(); $("#keyboard-input").focus().val(function(i, val) { var cursor = val.slice(0, this.selectionStart).length;//место курсора в input console.log(cursor); return val + key; }); }); |
Цитата:
<input id="keyboard-input" type="text"> Цитата:
Человек может исправить - смотри выше. Непонятна проблема. И скрипт в пост 1 непонятный - что он делает и зачем? |
Dilettante_Pro,
Я о том чтобы вводит с кнопки тыкая мышкой, допустим нет клавиатуры. А ошибка это человек, написал случайной прэвед, надо исправить э, ткнул мышкой туда, 2 символ и исправил. Так вот как отследить и исправить, я пока дошел до этого, но не работает: $('.key-button-new').click(function(){ var key = $(this).html(); $("#keyboard-input").focus().val(function(i, val) { var cursor = val.slice(0, this.selectionStart).length; console.log(cursor); return val.splice(cursor, 0, key); //return val + key; }); }); |
Вот как это сейчас работает:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <input id="keyboard-input" type="text"> <button type="button" class="key-button-new" >1</button> <button type="button" class="key-button-new" >2</button> <button type="button" class="key-button-new" >3</button> <button type="button" class="key-button-new" >4</button> <button type="button" class="key-button-new" >5</button> <button type="button" class="key-button-new" >6</button> <button type="button" class="key-button-new" >7</button> <button type="button" class="key-button-new" >del</button> <br> <div>Положение текста я отследил, а как вставить не знаю:<div id="text"></div></div> <script> $('.key-button-new').click(function(){ var key = $(this).html(); $("#keyboard-input").focus().val(function(i, val) { var cursor = val.slice(0, this.selectionStart).length; $("#text").html(cursor); if(key == 'del'){ return val.substr(0, val.length - 1); }else{ return val + key; }; }); }); </script> То есть если я тыкну мышкой в центр текста, а потом нажму на кнопки, новый текст вставится в конец введенного текста. Как сделать так чтобы текст вводился там где курсор, с кнопок (button)? |
Вставить можно так
<input id="keyboard-input" type="text"> <button type="button" class="key-button-new">1</button> <button type="button" class="key-button-new">2</button> <button type="button" class="key-button-new">3</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $('.key-button-new').click(function(){ var key = $(this).html(); $("#keyboard-input").focus().val(function(i, val) { var begin = val.slice(0, this.selectionStart); var end = val.slice( this.selectionStart, val.length ); console.log(begin + " " + end); return begin + key + end; }); }); </script> |
Dilettante_Pro,
Спасибо большое, а чтоб курсор потом там же остался? :thanks: |
Вставка символа в место отмеченное курсором
Artur_Hopf,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('.key-button-new').click(function(){ var key = this.innerHTML; var target = document.querySelector("#keyboard-input"), text = target.value, caretPos = target.selectionStart, caretPosEnd = target.selectionEnd; target.value = text.substr(0, caretPos) + key + text.substr(caretPosEnd); caretPos += key.length; target.focus(); target.setSelectionRange(caretPos, caretPos) }); }); </script> </head> <body> <input id="keyboard-input" type="text"> <button type="button" class="key-button-new">1</button> <button type="button" class="key-button-new">2</button> <button type="button" class="key-button-new">3</button> </body> </html> |
рони,
Спасибо, буду разбираться как это работает :thanks: |
Часовой пояс GMT +3, время: 02:04. |