

![画像の説明をここに入力](https://i.stack.imgur.com/2gQxQ.png)  
↑イメージはこんなかんじです

jquery/jquery-ui可です。

`input[type=text]`の下に目印をつけ、その情報を`さんぷる[目印]さんぷる`というフォーマットで取得するにはどうしたらよいでしょうか。

目印を付けてドラッグ出来るようにすることはできましたが、文字と文字の間にしかおけないキャレットと同じような振る舞いにすることができません。  
目印の位置からどの文字の間に位置するかというのもできません。

たすけてください。


CC BY-SA 3.0
2015-04-12T18:24:32.687
9083
2015-04-14T05:44:53.993
5855
question
javascript jquery jquery-ui
javascriptでキャレットのように動かせる目印を作りたい


難しいのは`input[type="text"]`に入力されている文字ごとの座標（や幅など）を取得することだと思いますが、とりあえず１文字ごとの座標や幅を取得できる汎用の関数として以下を定義できます。（Chromeでしか試していませんが。）

[code]

    (function($) {
      $.fn.mapForEachChar = function(callback) {
        var $hidden = this.data("mapForEachChar.$hidden");
        if(!$hidden) {
          $hidden = $("<div>");
          this.data("mapForEachChar.$hidden", $hidden);
          $hidden.get(0).style = $.extend(
            true, $hidden.get(0).style, getComputedStyle(this.get(0), "")
          );
          $hidden.css({
            position: "absolute", width: 0, height: 0, overflow: "hidden",
            visibility: "hidden", whiteSpace: "nowrap"
          });
        }
        return (
          $hidden.html(
            $.map(this.val().split(""), function(c) {
              return "<span>" + c + "</span>";
            }).join("")
          ).appendTo(document.body).children().map(callback).get()
        );
      };
    })(jQuery);
    
[/code]

これはこんな感じに使えます。

[code]

    $(function() {
      var pos = $("#textbox").mapForEachChar(function() {
        return this.offsetLeft;
      });
      console.log(pos);
      var wid = $("#textbox").mapForEachChar(function() {
        return this.offsetWidth;
      });
      console.log(wid);
    });
    
[/code]

後はドラッグした時や情報を取得する時に、座標判定すればなんとかなると思います。


CC BY-SA 3.0
2015-04-14T05:44:53.993
9142
2015-04-14T05:44:53.993
4388
9083
answer