実装したいこと
テキスト内のカーソル位置を取得したいです。
試してみたこと
検索したところジャバスクリプトにselectionStartメソッドがあり、テキストの最初のカーソル位置を取得できるとのことでしたので、以下のコードを書きました。
$('#text1').on('click', function(){
var point = $(this).get(0).selectionStart;
console.log(point);
});
この結果、コンソールがテキストのカーソル位置ではなく0になってしまいます。
どこかに問題ありますでしょうか。
全体コードは以下に載せます。
ご査収のほど、よろしくお願い致します。
HTML
1<?php 2 3require_once(__DIR__ . '/config.php'); 4require_once(__DIR__ . '/keisanki.php'); 5 6$kei = new MyApp\keisanki(); 7if ($_SERVER['REQUEST_METHOD'] === 'POST'){ 8 $kei->keisan(); 9} 10 ?> 11<!DOCTYPE html> 12<html lang="ja"> 13<head> 14 <meta charset="utf-8"> 15 <title>keisanki</title> 16 <link rel="stylesheet" href="styles.css"> 17</head> 18<body> 19 <div class="container"> 20 <form action ="" method="POST"> 21 <input type="text" id ="text1" name="text1" value="<?= h($kei->result); ?>" > 22 <div> 23 <div class="other" id="C">C</div> 24 <div class="other" id="kakko">()</div> 25 <div class="other" id="del">DEL</div> 26 <div class="enzansi" id="waru">÷</div> 27 </div> 28 <div> 29 <div class="num_7-9" id="num_7">7</div> 30 <div class="num_7-9" id="num_8">8</div> 31 <div class="num_7-9" id="num_9">9</div> 32 <div class="enzansi" id="kakeru">×</div> 33 </div> 34 <div> 35 <div class="num_4-6" id="num_4">4</div> 36 <div class="num_4-6" id="num_5">5</div> 37 <div class="num_4-6" id="num_6">6</div> 38 <div class="enzansi" id="mainasu">-</div> 39 </div> 40 <div> 41 <div class="num_1-3" id="num_1">1</div> 42 <div class="num_1-3" id="num_2">2</div> 43 <div class="num_1-3" id="num_3">3</div> 44 <div class="enzansi" id="puls">+</div> 45 </div> 46 <div> 47 <div class="num_0-0" id="zero">0</div> 48 <div class="num_0-00" id="num_00">00</div> 49 <div class="num_0-00" id="num_.">.</div> 50 <div class="post" id="equal">=</div> 51 </div> 52 </form> 53</div> 54 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 55 <script> 56 $(function(){ 57 'use strict'; 58 var $selected = ''; 59 var text = document.getElementById('text1'); 60 var point = ''; 61 $('#text1').on('click', function(){ 62 var point = $(this).get(0).selectionStart; 63 console.log(point); 64 }); 65 66 $('.num_7-9, .num_4-6, .num_1-3, .num_0-0').on('click', function(){ 67 if(text.value == ""){ 68 $selected = $(this).text(); 69 text.value = $selected; 70 }else { 71 text.value += $(this).text(); //文字列として一文字追加する 72 } 73 }); 74 $('.enzansi, .num_0-00').on('click', function(){ 75 if(text.value == "" || text.value.slice(-1) == '+' || text.value.slice(-1) == '-' || text.value.slice(-1) == '×' || text.value.slice(-1) == '÷' || text.value.slice(-1) == '='){ 76 return; 77 }else { 78 text.value += $(this).text(); //文字列として一文字追加する 79 80 } 81 }); 82 $('#del').on('click', function(){ 83 text.value = text.value.slice(0, -1); 84 }); 85 $('#C').on('click', function(){ 86 location.reload(); 87 text.value = ''; 88 }); 89 $('#kakko').on('click', function(){ 90 if(text.value.slice(-1) == '.' || text.value.slice(-1) == ')'){ 91 return; 92 }else{ 93 if(text.value.match(/\D$/) || text.value ==''){ 94 text.value = text.value + '('; 95 }else{ 96 if (text.value.match(/[0-9]$/)){ 97 text.value = text.value + ')'; 98 } 99 } 100 } 101 }); 102 $('#equal').on('click', function(){ 103 $('form').submit(); 104 }); 105}); 106 </script> 107</body> 108</html> 109
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/02 14:36