Clickable Font Awesome Icon внутри Вход

В настоящее время у меня есть значок шрифта, который находится над полем ввода. Я хотел бы, чтобы значок был доступен для кликов, но я не могу заставить его работать. Я обернул его в промежутке и изменил курсор, но он, похоже, не имеет никакого эффекта.Clickable Font Awesome Icon внутри Вход

Вот код:

.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> и дайте обработчик кликов.

Нажмите Handler

$(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 Это отлично работает для меня. Проверьте фрагмент. Какова конкретная проблема? Или я не могу понять вашу проблему? –

Отсканированный фрагмент имеет значок за пределами поля ввода, но мой значок находится внутри поля. –

Clickable Font Awesome Icon внутри Вход

ответ

Смежные вопросы