| Djambulat | 24.11.2017 16:47 |
Привязка переменных к каждому элементу
Здравствуйте.
Сверстать клавиатуру и выводить на определенную область вводимые буквы после клика. Мне к каждой букве на клавиатуре нужно дать переменную... Подскажите как это сделать? Хотя бы дайте правильно начать, чтобы не тратил в пустую времени |
Цитата:
Не проще делегировать обработчик события click ближайшему родителю каждой кнопки? |
<div id="result"></div>
<div id="keyboard">
<span>q</span>
<span>w</span>
<span>e</span>
<span>r</span>
<span>t</span>
<span>y</span>
</div>
<script>
document.querySelector('#keyboard').addEventListener('click',function(event){
if(this!==event.target)
document.querySelector('#result').innerHTML+=event.target.innerHTML;
});
</script>
|
Это Ангуляр?
|
Djambulat, прошу прощения за невнимательность, это javascript :)
|
Ничего)) А с ангуляром не сможешь?
|
Djambulat, к сожалению нет.
|
Мой "Hello World!"
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<main ng-controller="AppController">
<div >{{ inputstring }}</div>
<div>
<span ng-click="getLetter('q')">q</span>
<span ng-click="getLetter('w')">w</span>
<span ng-click="getLetter('e')">e</span>
<span ng-click="getLetter('r')">r</span>
<span ng-click="getLetter('t')">t</span>
<span ng-click="getLetter('y')">y</span>
</div>
</main>
<script>
(function() {
'use strict';
angular
.module('app', [])
.controller('AppController', ['$scope', function($scope) {
$scope.getLetter = function(letter) {
$scope.inputstring = ($scope.inputstring?$scope.inputstring:"") + letter ;
};
}]);
})();
</script>
</body>
</html>
|
"Hello World!" дубль два :)
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<main ng-controller="AppController">
<div >{{ inputstring }}</div>
<div>
<span ng-repeat='b in letter' ng-click="getLetter(b)"> {{b}}</span>
</div>
</main>
<script>
(function() {
'use strict';
angular
.module('app', [])
.controller('AppController', ['$scope', function($scope) {
$scope.letter = 'qwerty';
$scope.inputstring = "";
$scope.getLetter = function(letter) {
$scope.inputstring += letter ;
};
}]);
})();
</script>
</body>
</html>
|
Спасибо. А как прописать кнопку backspace, чтобы удаляла последнюю букву?))
|
Djambulat,
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<style type="text/css">
div span{
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<main ng-controller="AppController">
<div >{{ inputstring }}</div>
<div>
<span ng-repeat='b in letter' ng-click="getLetter(b)"> {{b}}</span>
<span ng-click="inputstring = inputstring.slice(0,-1)"> ↵</span>
</div>
</main>
<script>
(function() {
'use strict';
angular
.module('app', [])
.controller('AppController', ['$scope', function($scope) {
$scope.letter = 'qwerty';
$scope.inputstring = "";
$scope.getLetter = function(letter) {
$scope.inputstring += letter ;
};
}]);
})();
</script>
</body>
</html>
|
Переключение раскладки и shift
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<style type="text/css">
div {height:20px;}
div span{
cursor: pointer;
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<main ng-controller="AppController">
<div >{{ inputstring }}</div>
<div>
<span ng-click="chngShift()"> {{view}}</span>
<span ng-click="chngLetter()"><img src="https://javascript.ru/forum/images/smilies/smile.gif"/></span>
<span ng-repeat='b in letter' ng-click="getLetter(b)"> {{b}}</span>
<span ng-click="inputstring = inputstring.slice(0,-1)">⇐</span>
</div>
</main>
<script>
(function() {
'use strict';
angular
.module('app', [])
.controller('AppController', ['$scope', function($scope) {
var alfa ={eng:{alt:'rus',alf:'qwerty'}, rus:{alt:'eng',alf:'йцукен'}};
var shift ={up:{alt:'down',view:'String.fromCharCode(0x21D1)'},down:{alt:'up',view:'String.fromCharCode(0x21D3)'}};
$scope.view = eval(shift.up.view);
$scope.shift = shift.up.alt;
$scope.letter = alfa.eng.alf;
$scope.language =alfa.eng.alt;
$scope.inputstring = "";
$scope.getLetter = function(letter) {
$scope.inputstring += letter ;
};
$scope.chngLetter = function() {
$scope.letter = alfa[$scope.language].alf ;
$scope.language =alfa[$scope.language].alt ;
if(shift[$scope.shift].alt == 'down')
{ $scope.letter = $scope.letter.toUpperCase(); }
else
{ $scope.letter = $scope.letter.toLowerCase(); };
};
$scope.chngShift = function() {
if(shift[$scope.shift].alt == 'up')
{ $scope.letter = $scope.letter.toUpperCase(); }
else
{ $scope.letter = $scope.letter.toLowerCase(); };
$scope.view = eval(shift[$scope.shift].view);
$scope.shift = shift[$scope.shift].alt;
};
}]);
})();
</script>
</body>
</html>
|
Dilettante_Pro,
:dance: :) |
рони,
shift добавлен:victory: немного костыльно:-E |
Dilettante_Pro,
:) :victory: |
почему у меня, после того как я стер одну букву, то снова клик не работает? Нужно снова обновить страницу и написать...
|
С шифтом я разберусь после того как с backspace разберусь... Shift очень интересно))))
|
Цитата:
|
Google.
А все я так сделал... <span ng-click="remo()">⇐</span>
$scope.remo = function() {
$scope.inputstring = $scope.inputstring.slice(0, -1);
};
|
Теперь нужно к Shift приступать))))))
|
Если у меня целая клавиатура сверстана уже на англ и русск, то как тогда быть?
|
Djambulat,
Не нужен переключатель раскладок. А на экране место остается? |
Место для двух клавиатур или в каком смысле?
|
Djambulat,
Место для ввода текста после размещения на нем двуязычной клавиатуры. |
|
Внизу для ввода текста. Хочу после клика на иконку в форме земли, чтобы менялся язык))
|
Djambulat,
А вы писали Цитата:
И еще цифры включать. Ну, шпаргалка у вас есть - дальше попробуйте сами. насчет земного шара - посмотрите еще раз пример пост 12 |
У тебя из кнопок (qwerty) и (йцукен) А как это сделать с полной клавиатурой и css стилями? Давайте так, у меня два файла ruKey.html и engKey.html как их подставить туда?
|
| Часовой пояс GMT +3, время: 09:34. |