safariとクロームの挙動の違いにつて

実現したいこと

テキスト内（#text1）の文字列をクリックしたとき、そこにカーソルをセットしたい

試してみたこと

javascript
1    $('.num_7-9, .num_4-6, .num_1-3, .num_0-0, .text').on('click', function(){
2      var point = $('#text1').prop("selectionStart");
3       console.log(point);
4      if(text.value == ""){
5         $selected = $(this).text();
6         text.value = $selected;
7      }else {
8        text.value += $(this).text();

上記のコードについてですが、ブラウザで挙動が違います。
1.グーグルクローム
クリックした位置にカーソルがセットされ、console.logでもクリックした位置が反映されている.

2.safari
文字列の途中をクリックすると、一瞬だけそこがクリックされて、文字列の最後尾にカーソルが移動する。
例）'abcde'の文字列があり、aとbの間をクリックするとeの後ろにセットされる。
console.logはクリックした位置が反映されている。

クロームでは実現できているのですが、safariは同じようにいきません。

ブラウザによって変わるものなのでしょうか？

下記が全体コードとなります。
ご査収のほど、よろしくお願い致します。

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" class="text" 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
61    $('.num_7-9, .num_4-6, .num_1-3, .num_0-0, .text').on('click', function(){
62      var point = $('#text1').prop("selectionStart");
63       console.log(point);
64      if(text.value == ""){
65         $selected = $(this).text();
66         text.value = $selected;
67      }else {
68        text.value += $(this).text(); //文字列として一文字追加する
69      }
70    });
71  $('.enzansi, .num_0-00').on('click', function(){
72     if(text.value == "" || text.value.slice(-1) == '+' || text.value.slice(-1) == '-' || text.value.slice(-1) == '×' || text.value.slice(-1) == '÷' || text.value.slice(-1) == '='){
73       return;
74     }else {
75       text.value += $(this).text(); //文字列として一文字追加する
76       console.log(text.value);
77
78     }
79    });
80  $('#del').on('click', function(){
81      text.value = text.value.slice(0, -1);
82    });
83  $('#C').on('click', function(){
84    location.reload();
85    text.value = '';
86    });
87  $('#kakko').on('click', function(){
88      if(text.value.slice(-1) == '.' ||  text.value.slice(-1) == ')'){
89      return;
90      }else{
91      if(text.value.match(/\D$/) || text.value ==''){
92        text.value = text.value + '(';
93      }else{
94        if (text.value.match(/[0-9]$/)){
95        text.value = text.value + ')';
96      }
97      }
98      }
99    });
100  $('#equal').on('click', function(){
101    $('form').submit();
102 });
103});
104 </script>
105</body>
106</html>
107

行動規範の内容に同意します

回答1件

ベストアンサー

何のために入れているのかわかりませんが、下記の.textを外したら何か支障が出るのでしょうか。

jQuery
1$('.num_7-9, .num_4-6, .num_1-3, .num_0-0, .text').on('click', function(){

もし必要なければそうすることで解決するはずですが。

投稿2019/04/03 13:37

cerfweb

総合スコア1899

GoGobuchiking

2019/04/03 14:58

御回答ありがとうございます。 .textをクリックイベントに設定して、テキスト内をクリックしないとカーソル位置が得らないものだと思っていました。しかしvar point = $('#text1').prop("selectionStart");で他のボタンのクリックでも得られますね。勘違いでした。 .textを外してみたところ、safariでもうまく行きました。うまくいく原因はわからないのですが、このような無駄なところがブラウザの挙動の違いに繋がってくるものなのでしょうか。