Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.04.2017, 13:06   #1
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Вопрос Javascript. Наследование метода, изменение

Изучаю тонкости ООП в Javascript. В этом коде при щелчке по списку, копируется текст в вышестоящий input
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>События</title>
<style>
div, input {box-sizing:border-box; outline:none; width:150px;} .listBox, input {border:1px solid #ccc;} .listBox div:hover {background:#f0f0f0;}
</style>
</head>
<body>
<div id="s1">
  <input value="" readonly>
  <div class="listBox">
    <div>Автомобили</div> <div>Компьютеры</div> <div>Бытовая техника</div>
  </div>
</div>
<br>
<button onclick="getValue()">Прочитать value из объека</button>
<script>
function mySelect(idx) {
  var el = document.getElementById(idx);
  var inp = el.children[0], listBox = el.querySelector('.listBox');
  this.onChangeValue = listBox.onclick = function(e) {
    inp.value = e.target.textContent;
    console.log('сообщение из mySelect');
  }
  this.text = function() {return inp.value};
}

var s1 = new mySelect('s1');
function getValue() {console.log(s1.text());}//OK

var parentChange = s1.onChangeValue;
s1.onChangeValue = function(e) {// неудачная попытка
  parentChange.call(this);
  console.log('сообщение из внешнего мира');
};
</script>
</body>
</html>
Свойство text успешно вытаскивается из объекта через s1.text(). Хочется сделать нечто похожее и для метода onChangeValue...
Вопрос: как сделать так, чтобы отловить изменение текста в input ?
Т.е. я щелкаю по элементу списка, и кроме фразы "сообщение из mySelect" должна ещё появляться фраза "сообщение из внешнего мира"
SQLPowerUser вне форума Ответить с цитированием
Старый 17.04.2017, 14:18   #2
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
По умолчанию

Решил вот таким образом:
Код:
function mySelect(idx) {
  var self = this;
  var el = document.getElementById(idx);
  var inp = el.querySelector('input'), listBox = el.querySelector('.listBox');
  self.onChangeValue = function(e) {
    inp.value = e.target.textContent;
  }
  listBox.onclick = function(e) {
     if (typeof self.onChangeValue === 'function') {
        self.onChangeValue(e);
     }
  }
  self.text = function() {return inp.value};
}

var s1 = new mySelect('s1');
var parentChange = s1.onChangeValue;
s1.onChangeValue = function(e) {
  parentChange.call(this, e);
  console.log('Выбрано:',s1.text());
};
З.Ы. в стандартом HTML есть список выбора <select> <option>. Я сделал аналогичный компонент с поиском и прочей кастомизацией. Не знал только как отловить событие onchange как у <select> <option>.
SQLPowerUser вне форума Ответить с цитированием
Старый 25.04.2017, 09:47   #3
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
По умолчанию

Вариант через prototype, полная демо версия https://jsfiddle.net/9xqgLa4d/1/
Здесь работает событие onchange, можно при желании задавать поиск и т.д.

Последний раз редактировалось SQLPowerUser; 25.04.2017 в 09:52.
SQLPowerUser вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Наследование метода от TCollection CraZZZy-GameRRR Общие вопросы Delphi 1 20.10.2016 19:12
Объявление метода внутри объекта JAVASCRIPt Kasper1 JavaScript, Ajax 4 09.03.2011 09:50
Javascript - классы, они есть или их нету в Javascript? Kasper1 JavaScript, Ajax 3 05.03.2011 09:42
Вызов метода из метода kuzjma PHP 8 10.12.2010 02:38
Динамическое изменение URL страницы в JavaScript без перезагрузки страницы ilusha JavaScript, Ajax 7 25.02.2009 09:59