可點擊的字體輸入裏面的真棒圖標

我目前有一個位於輸入字段上的字體超讚圖標。我希望圖標可以點擊，但我似乎無法使其工作。我已經將它包裹在一個跨度中，並更改了跨度光標，但它看起來沒有任何影響。可點擊的字體輸入裏面的真棒圖標

下面的代碼：

.inner-addon { 
 
    position: relative; 
 
} 
 
.inner-addon .fa { 
 
    position: absolute; 
 
    padding: 10px; 
 
    pointer-events: none; 
 
} 
 
.left-addon .fa { 
 
    left: 0px; 
 
} 
 
.right-addon .fa { 
 
    right: 0px; 
 
} 
 
.left-addon input { 
 
    padding-left: 30px; 
 
} 
 
.right-addon input { 
 
    padding-right: 30px; 
 
} 
 
#locationClickableIcon { 
 
    cursor: pointer; 
 
}

<span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span> 
 
<input type="text" id="address" placeholder="Zipcode" value="" />

來源

2016-10-04 Jake Ols

點擊正常工作（https://jsfiddle.net/o2vg3men/1/）。點擊時你想要發生什麼？ – Turnip

對我來說，圖標位於輸入框的內部，不可點擊。 –

@JakeOls你沒有顯示它真的失敗的地方。我們應該如何幫助解決問題？ –

它不會有任何影響，因爲你還沒有要求它做任何點擊。按照你想要的方式工作。如果您希望它的行爲類似於鏈接，請將<span>更改爲<a>並提供點擊處理程序。

click處理

$(function() { 
 
    $("#locationClickableIcon").click(function() { 
 
    alert("You clicked me!"); 
 
    }); 
 
});

.inner-addon { 
 
    position: relative; 
 
} 
 

 
.inner-addon .fa { 
 
    position: absolute; 
 
    padding: 10px; 
 
    pointer-events: none; 
 
} 
 

 
.left-addon .fa { left: 0px;} 
 
.right-addon .fa { right: 0px;} 
 

 
.left-addon input { padding-left: 30px; } 
 
.right-addon input { padding-right: 30px; } 
 
#locationClickableIcon { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span> 
 
<input type="text" id="address" placeholder="Zipcode" value="" />

鏈接

.inner-addon { 
 
    position: relative; 
 
} 
 

 
.inner-addon .fa { 
 
    position: absolute; 
 
    padding: 10px; 
 
    pointer-events: none; 
 
} 
 

 
.left-addon .fa { left: 0px;} 
 
.right-addon .fa { right: 0px;} 
 

 
.left-addon input { padding-left: 30px; } 
 
.right-addon input { padding-right: 30px; } 
 
#locationClickableIcon { 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a id="locationClickableIcon" href="http://example.com/"><i class="fa fa-crosshairs" id='autolocate'></i></a> 
 
<input type="text" id="address" placeholder="Zipcode" value="" />

來源

2016-10-04 12:45:09

謝謝 - 我添加了點擊處理程序，但它仍然不可點擊/指針不會改變。當我更改CSS以將圖標從輸入中移出時，它可以工作，而不是當它位於輸入上時。 –

@JakeOls它適用於我。檢查片段。確切的問題是什麼？或者是我無法理解你的問題？ –

您發佈的片段在輸入框外有圖標，但我的圖標位於框內。 –

可點擊的字體輸入裏面的真棒圖標

回答

相關問題