同じテキストボックス内をクリックすると、ハイパーリンクのテキストに変換されますか？

Question

おはよう

テキストボックス内のテキストをハイパーリンクに変換する必要があります。

問題は、新しいリンクをテキストボックスに表示する必要があることです。

Googleマップのスクリプトを使用して、ユーザーがモーダルgoogleマップのポップアップで場所を選択すると、座標をテキストボックスに自動的に入力しています。自分の位置を選択した後に「続行」を押すと、このURLの後ろに「https://www.google.com/maps/place(+座標」の後ろに座標を追加する必要があります。

地図をクリックすると座標がすでに塗りつぶされています。 「続行」を押すと、座標の前にGoogleマップのURLを追加してリンクを作成する必要があります。

ご協力いただければ幸いです。

http://jsfiddle.net/fag9n52y/105/

$(document).ready(function(){ 
 
$("#cancel").click(function(){ //closes coor1 class and clears coordinate1 value 
 
    $(".Coor1").hide(); 
 
    $("#Coordinate1").val(''); 
 
}); 
 
    $("#clearFields").click(function(){ // clears Coordinate1 value 
 
    $("#Coordinate1").val(''); 
 
    }); 
 
}); 
 

 

 
var center = new google.maps.LatLng(23.578462278048715, 45.40855407714844); 
 
function initialize() { 
 

 
    var mapOptions = { 
 
     zoom: 5, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     center: center 
 
    } 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: center 
 
     
 
    }); 
 

 
    google.maps.event.addListener(map, 'click', function(event) { 
 
     google.maps.event.trigger(map, 'resize'); 
 
     $("#Coordinate1").val(event.latLng.lat() + ", " + event.latLng.lng()); 
 
     $("#Coordinate1").select(); 
 

 
     if (marker) { marker.setMap(null); } 
 

 
       marker = new google.maps.Marker({ position: event.latLng, map: map}); 
 
       map.panTo(marker.getPosition()); 
 
       }); 
 

 
} 
 
$(document).ready(function(){ 
 
$('#Coordinate1').on('click', function() { 
 
    $('#modal').modal({ 
 
     keyboard: false 
 
    }).on('shown.bs.modal', function() { 
 
     google.maps.event.trigger(map, 'resize'); 
 
     map.setCenter(center); 
 
    }); 
 
}); 
 
}); 
 
google.maps.event.addDomListener(window, 'load', initialize);

body, .modal-open .page-container, .modal-open .page-container .navbar-fixed-top, .modal-open .modal-container { 
 
    overflow-y: scroll; 
 
} 
 
@media (max-width: 979px) { 
 
    .modal-open .page-container .navbar-fixed-top { 
 
     overflow-y: visible; 
 
    } 
 
} 
 
#map-canvas { 
 
    height: 400px; 
 
}

<input type="text" id="Coordinate1"> 
 

 
<div id="modal" class="modal hide fade"> 
 
    <div class="modal-body"> 
 
     <div id="map-canvas"></div> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button> <!-- WHEN THIS BUTTON IS CLICKED, THE COORDINATES WHICH HAVE BEEN AUTOMATICALLY ENTERED INTO THE TEXTBOX, MUST BE CONVERTED INTO A HYPERLINK" --> 
 
     <button type="button" id="clearFields" data-dismiss="modal" class="btn">Clear</button> 
 
     <button type="button" data-dismiss="modal" id="cancel" class="btn" data-value="0">Cancel</button> 
 
    </div> 
 
</div>

Answer 1

ようなテキストフィールドにハイパーリンクを置く方法は本当にありません。あなたのフィドルを少し修正し、テキストフィールドの代わりにスパンを使用しました。テキストフィールドは通常、ユーザー入力であるため、ハイパーリンクを保持するようには設計されていません。つまり、スパンと同様の効果を達成することができます。ここで変更フィドルを参照してください。

http://jsfiddle.net/usrsud21/

を私はスパンでハイパーリンクを作成するには、次のコードを使用：

document.getElementById("Coordinate1").innerHTML="<a href = "+"https://www.google.com/maps/place/"+event.latLng.lat() + "," + event.latLng.lng()+">https://www.google.com/maps/place/"+event.latLng.lat() + "," + event.latLng.lng()+"</a>"; 

私はそれを動作させるために少しデザインを変更しました。私はdivを単語 "launch map"の周りに置き、 "launch map"をクリックすると地図を起動する場所に設定します。また、テキスト入力をスパンに変更し、「Maps URL Here」のプレースホルダを配置しました。このプレースホルダは、地図をクリックしてマーカーを作成するとすぐにハイパーリンクに置き換えられます。これは、maps.google.comに移動するハイパーリンクに置き換えられ、マーカーと同じ緯度および経度の座標まで開くことができます。

こちらがお役に立てば幸いです。