Блог

Главная - Вопросы по программированию - Щелкнуть по значку внутри формы

Щелкнуть по значку внутри формы

#javascript #forms #onclick

#javascript #формы #onclick

Вопрос:

Я хочу добавить значок внутри формы и иметь возможность щелкнуть по нему и запустить код JavaScript после нажатия.В принципе, я знаю, как добавить значок в форму, но я не знаю, как сделать его интерактивным с помощью OnClick.

код ввода для текстового поля — это HTML-код:

 <input id="cool"
   style=" width:45%; padding:4px; padding-right:25px;" type="text" name="game">

и код css для значка

Код CSS:

 #cool {
    background: url(game.jpg) no-repeat scroll 448px -1px;
    cursor:hand;
    cursor:pointer;
}

Но я не знаю, как я уже сказал, где я должен разместить команду OnClick, чтобы сделать доступным только значок.

Комментарии:

1. Добавить onclick просто : <input onclick="alert(1)" /> .

2. да, но в этом случае я хочу, чтобы нажимался только значок, а не все текстовое поле.

3. Сделайте это сложным способом, используя event.pageX и event.pageY , см. developer.mozilla.org/en/DOM/Event/UIEvent/MouseEvent ; или создайте интерактивный слой поверх текстового поля.

4. Можете ли вы объяснить, что такое «сделать кликабельным только значок»? Это ввод текста, а не ввод кнопки или кнопки.

Ответ №1:

3 способа сделать это:

  1. использование 
     <input type='text' id='input'>

    с помощью bg-изображения и

     $("#input").click(function(e){if(e.pageX > start_x amp;amp; e.pageX < end_x amp;amp; e.pageY > start_y amp;amp; e.pageY < end_y){
    // open new page
}});
  2. используя это: 
     <div style='position:relative'>
        <input />
        <div style='width:20px;height:20px;position:absolute;top:0;left:0' onclick="//js code to open page"></div>
</div>
  3. используя этот код: 
     <div>
        <div class='left'></div>
        <div class='right'><input /></div>
</div>
<style>
        .left{float:left;width:25px;height:25px;background-image:url(the_image.png)}
        .right{float:left;width:200px;height:25px;}
</style>
Метки: