text内のカーソル位置が取得できません。

実装したいこと

テキスト内のカーソル位置を取得したいです。

試してみたこと

検索したところジャバスクリプトにselectionStartメソッドがあり、テキストの最初のカーソル位置を取得できるとのことでしたので、以下のコードを書きました。
$('#text1').on('click', function(){
var point = $(this).get(0).selectionStart;
console.log(point);
});

この結果、コンソールがテキストのカーソル位置ではなく０になってしまいます。

どこかに問題ありますでしょうか。

全体コードは以下に載せます。
ご査収のほど、よろしくお願い致します。

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件

ベストアンサー

見た感じ特に問題なさそうですが、以下テストしてみてください

javascript
1<script>
2$(function(){
3  $('#text1').on('click', function(){
4    var point = $(this).prop("selectionStart");
5    console.log(point);
6  }); 
7});
8</script>
9<input type="text" id ="text1" name="text1" value="hogehoge">