Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помощь с функциональностью (https://javascript.ru/forum/misc/53297-pomoshh-s-funkcionalnostyu.html)

DeV1doR 28.01.2015 20:33
Помощь с функциональностью
 
Хочу улучшить калькулятор. Ниже код:
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			button {
				text-align: center;
			}

			input {
				text-align: right;
				padding-left: 5px;
				padding-right: 5px;
			}

			button, input {
				width: 100%;
				height: 35px;
			}
		</style>
		<script type="text/javascript">
			"use strict";

			function typeSomething(id) {
				myText.value += id.innerHTML;
			}

			function clearSomething() {
				myText.value = '';
			}

			function calculation() {
				myText.value = eval(myText.value);
			}

			function minusOne() {
				myText.value = myText.value.slice(0,-1);
			}
		</script>
	</head>
	<body>
		<table id="numbers">
			<tr>
				<td colspan="4"><input id="myText" value=""/></td>
			</tr>
			<tr>
				<td colspan="3"><button id="ClearAll" onClick="clearSomething()">Clear All</button></td>
				<td><button id="Minus1" onClick="minusOne()"><-</button></td>
			</tr>
			<tr>
				<td><button id="Seven" onClick="typeSomething(this)">7</button></td>
				<td><button id="Eight" onClick="typeSomething(this)">8</button></td>
				<td><button id="Nine" onClick="typeSomething(this)">9</button></td>
				<td><button id="Devide" onClick="typeSomething(this)">/</button></td>
			</tr>
			<tr>
				<td><button id="Four" onClick="typeSomething(this)">4</button></td>
				<td><button id="Five" onClick="typeSomething(this)">5</button></td>
				<td><button id="Six" onClick="typeSomething(this)">6</button></td>
				<td><button id="Multiply" onClick="typeSomething(this)">*</button></td>
			</tr>
			<tr>
				<td><button id="One" onClick="typeSomething(this)">1</button></td>
				<td><button id="Two" onClick="typeSomething(this)">2</button></td>
				<td><button id="Three" onClick="typeSomething(this)">3</button></td>
				<td><button id="Minus" onClick="typeSomething(this)">-</button></td>
			</tr>
			<tr>
				<td><button id="dot" onClick="typeSomething(this)">.</button></td>
				<td><button id="Zero" onClick="typeSomething(this)">0</button></td>
				<td><button id="Equal" onClick="calculation()">=</button></td>
				<td><button id="Plus" onClick="typeSomething(this)">+</button></td>
			</tr>
		</table>
	</body>
</html>


1) Как сделать, что бы функция minusOne() убирала не только последний символ, а любой?(например- число 1234)Моя функция будет убирать 4, где бы не стоял мигающий курсор. Надо сделать так, что бы она удаляла последнее число там, где как раз, таки курсор.

2) Как сделать ограничение по вводу input?(нашел maxlength, но он не пашет).

3) Критику в студию):)

ПС: Моя почти первая программка, не включая это http://javascript.ru/forum/misc/5219...i-dannymi.html. Спс Рони, препод заценил)

danik.js 28.01.2015 23:19
Цитата:
Сообщение от DeV1doR
где как раз, таки курсор.
input.selectionStart, input.selectionEnd - начало и конец выделения.
Цитата:
Сообщение от DeV1doR
нашел maxlength, но он не пашет
Уверен?
<input type="text" maxlength="1" />


Цитата:
Сообщение от DeV1doR
onClick
Блин глаза режет этот onClick. Че ж ты тогда не пишешь colSpan? HTML регистронезависим, пиши в нижнем регистре.

danik.js 28.01.2015 23:23
Цитата:
Сообщение от DeV1doR
Как сделать ограничение по вводу input?(нашел maxlength, но он не пашет)
А, я понял. Ограничение идет только для ввода пользователем. А при изменении value скриптом ты уже сам должен сделить.

Замени все "myText.value = xxx" на "setValue(xxx)":

function setValue(value) {
    myText.value = value.substring(0, myText.maxLength);
}

DeV1doR 29.01.2015 00:16
danik.js,
спс, сейчас попробуем, что получиться. На счет onClick, где один раз так увидел, и запомнилось...

DeV1doR 29.01.2015 01:52
danik.js,
function minusOne() 
			{
				var input = document.getElementById('myText');
				input.value =  input.value.slice(input[0],input.selectionStart-1) + input.value.slice(input.selectionStart);

			}


С этим вроде разобрался(спс за наводку), а 
function setValue(value) {
    myText.value = value.substring(0, myText.maxLength);
}


как мне быть с 
function typeSomething(id) {
                myText.value += id.innerHTML;
            }

?

danik.js 29.01.2015 02:00
Цитата:
Сообщение от DeV1doR
value.slice(input[0]
Какого хрена? Что в input[0] и зачем ты это передаешь в splice?
Цитата:
Сообщение от DeV1doR
как мне быть
Для начала разверни запись. += это сокращенная форма какой записи?

danik.js 29.01.2015 02:07
Цитата:
Сообщение от danik.js
Для начала разверни запись
Можно иначе решить проблему.
Ты плюсуй не всю innerHTML, а только ту ее часть, которая еще поместится в value. Хотя у тебя innerHTML для всех кнопок состоит из одного символа, можно и без substring обойтись. Без разницы в общем.

DeV1doR 29.01.2015 02:08
danik.js,
в input[0] отсчет с 1 символа, а в slice передаю, что бы скопировать(ну я хз, как по другому сделать).

myText.value += id.innerHTML -> myText.value = myText.value +id.innerHTML.

danik.js 29.01.2015 02:46
Цитата:
Сообщение от DeV1doR
в input[0] отсчет с 1 символа
Че несешь?

<input value="bla bla" id="myText" />
<script>
var input = document.getElementById('myText');
alert(input[0]);
</script>


Цитата:
Сообщение от DeV1doR
в slice передаю, что бы скопировать(ну я хз, как по другому сделать).
Открой документацию по методу slice и посмотри какие аргументы он принимает. Пока что у тебя получается вызов .slice(undefined, 123)

DeV1doR 29.01.2015 02:58
danik.js,
https://developer.mozilla.org/ru/doc...ts/Array/slice
Если begin опущен, slice() начинает работать с индекса 0.

input.value = input.value.slice(0,input.selectionStart-1) + input.value.slice(input.selectionStart);
Может пишу опять хрень, но так?:-E

danik.js 29.01.2015 03:07
Цитата:
Сообщение от DeV1doR
так?
Так. Только ты смотришь документацию на одноименный метод массива, а не строки ;)

DeV1doR 29.01.2015 03:12
danik.js,
https://developer.mozilla.org/ru/doc...s/String/slice
Я шляпа)
А еще такой вопрос, как можно заменить здесь innerHTML?

danik.js 29.01.2015 03:22 
.textContent

Или
.firstChild.data (суть - текст содержится в текстовых узлах. firstChild и будет в данном случае текстовым узлом. Если элемент не содержит текста, то firstChild не существует и будет ошибка, так что такой вариант неудобен - я показал просто что такое есть).

DeV1doR 29.01.2015 03:48
danik.js,
Спасибо.

DeV1doR 29.01.2015 18:03
Кто подскажет, как добавить число между строки через кнопку? Например, число 12356, бац кликаю мышкой между 3 и 5, жму 4(на кальке) и вуаля 123456. Не додумался, кто сможет написать?

danik.js 29.01.2015 22:33
Цитата:
Сообщение от DeV1doR
Не додумался
Хреново дело. У тебя же minusOdin() делает почти то, что нужно. Только вместо вырезания символа между начальной и конечной частью строки, нужно наоборот, приплюсовать новый символ.

рони 29.01.2015 23:06
Вставка символа в место отмеченное курсором
 
Цитата:
Сообщение от DeV1doR
Например, число 12356, бац кликаю мышкой между 3 и 5, жму 4(на кальке) и вуаля 123456.
 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
  <input id="res" name="" value="12356">
  <input id="ok" name="" type="button" value="4">
  <script>
 document.querySelector("#ok").onclick = function() {
    var target = document.querySelector("#res"),
        text = target.value,
        caretPos = 0;
    if (document.selection) {
        target.focus();
        var sel = document.selection.createRange();
        sel.moveStart("character", -target.value.length);
        caretPos = sel.text.length
    } else if (target.selectionStart || target.selectionStart == "0") caretPos = target.selectionStart;
    target.value = text.substr(0, caretPos) + this.value + text.substr(caretPos);
    caretPos++
    if (target.setSelectionRange) {
        target.focus();
        target.setSelectionRange(caretPos, caretPos)
    } else if (target.createTextRange) {
        var range = target.createTextRange();
        range.collapse(true);
        range.moveEnd("character", caretPos);
        range.moveStart("character", caretPos);
        range.select()
    }
};
  </script>
</body>

</html>

danik.js 30.01.2015 01:45
Это нужно для IE8-. Не думаю чтоDeV1doR'у нужен кроссбраузерный калькулятор :)

рони 30.01.2015 02:24
Цитата:
Сообщение от danik.js
Это нужно для IE8-.
то есть ты предлагаешь оставить так? или другой вариант?
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
  <input id="res" name="" value="12356">
  <input id="ok" name="" type="button" value="4">
  <script>
 document.querySelector("#ok").onclick = function() {
    var target = document.querySelector("#res"),
        text = target.value,
        caretPos = target.selectionStart;
    target.value = text.substr(0, caretPos) + this.value + text.substr(caretPos);
    caretPos++;
    target.focus();
    target.setSelectionRange(caretPos, caretPos)
   };
  </script>
</body>
</html>

DeV1doR 30.01.2015 18:39
рони,
спс, теперь надо все это переварить)
danik.js,
хочу понять принцип взаимодействия с мышкой, про кроссбраузерность не думал)


Часовой пояс GMT +3, время: 12:00.