Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ต้องการให้ javascript เครื่องคิดเลข แสดงผลตรงที่ เคอเซอร์ กระพริบอยู่

ต้องการให้ javascript เครื่องคิดเลข แสดงผลตรงที่ เคอเซอร์ กระพริบอยู่

เริ่มหัวข้อใหม่

โพสกระทู้ ( 72 )
บทความ ( 0 )

ต้องการให้ javascript เครื่องคิดเลข แสดงผลตรงที่ เคอเซอร์ กระพริบอยู่

ตัวอย่างเป็นตามรูป

ผมต้องการให้เครื่องคิดเลขทำงานตรงที่ เคอเซอร์ กระพริบ แต่ตอนนี้ทำได้แค่
<input name="pep1" type="text" id="pep1"/>

แต่เมื่อเอาเมาล์ไปที่ช่อง pep2 pep3 pep4 pep5 มันไม่ทำงาน ทำงานแต่ในช่อง pep1

รบกวนผู้รู้ช่วยดูให้หน่อยครับ

Code (JavaScript)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ตัวอย่าง ทำเครื่องคิดเลขที่ใช้ MOUSE ลากไปมาและปิดได้</title>
<style type="text/css">
<!--
#demo {
	margin:0px;
/* delete the style declaration below if you do not want it to be transparent! */
}
#calculator {
	filter:alpha(opacity=85);
	-moz-opacity:.85;
	opacity:.85;
}
.drag
{
	position:relative;
	cursor:hand
}
#calculator
{
	background-color:#F4F4F4;
	cursor:move;
	width:190px;
}
.calculatorcontainer
{
	padding:5px;
	border-top:1px solid #C0C0C0;
	border-left:1px solid #C0C0C0;
	border-right:2px outset #C0C0C0;
	border-bottom:2px outset #C0C0C0;
}
#calculator #control
{
	text-align:right;
}
#calculator input
{
	width:40px;
	height:30px;
	margin:2px;
	background-color:#FFF;
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:0.95em;
	border:1px solid #C0C0C0;
	cursor:hand;
	cursor:pointer;
}
#calculator img
{
	border:0px none;
}
#calculator #result
{
	width:173px;
	font-size:1.3em;
	padding:3px;
	cursor:text;
}
#calculator .operation
{
	color:#999;
	font-weight:bold;
	background-color:#DDD;
}
#calculator .equals
{
	color:#FFF;
	font-weight:bold;
	background-color:#336699;
}
#version
{
	float:left;
	padding:2px 0px 0px 2px;
	font-size:0.65em;
}
#version a
{
	color:#333;
	cursor:move;
	text-decoration:none;
}

-->
</style>

<script type="text/javascript">
<!--

var calculation = "";
var resultDone = false;

function addToCalc(val) {
  if(isNaN(val) && isNaN(calculation.substring(calculation.length-1, calculation.length)))
    return false;

  if(!isNaN(val) && resultDone) {
    resetCalc();
    resultDone = false;
  } else if(isNaN(val) && resultDone) {
    resultDone = false;
  }
  calculation += val;
  showResult();
}

function addToCalcDirect(val) {
  calculation = val;
}

function resetCalc() {
  calculation = "";
  showResult();
}

function positiveNegative() {
  if(calculation.substring(0, 1) == "-")
    calculation = calculation.substring(1, calculation.length);
  else
    calculation = "-" + calculation;
  showResult();
}

function calculate() {
  if(calculation != "") {
    try {
      calculation = eval(calculation);
    } catch(e) {
      reportError("Error!");
    }
    resultDone = true;
    showResult();
  }
  else
    return false;
}

function percentage() {
  try {
    calculation = eval(calculation) / 100;
  } catch(e) {
    reportError("Error!");
  }
  resultDone = true;
  showResult();
}

function squareRoot()
{
  try {
    calculation = Math.sqrt(eval(calculation));
  } catch(e) {
    reportError("Error!");
  }
  resultDone = true;
  showResult();
}

function showResult() {
  calculation = calculation.toString();
  if(calculation == "NaN") {
    reportError("Error!");
  } else {
    document.getElementById("pep1").value = calculation;
  }
}

function reportError(msg) {
  calculation = msg;
  document.getElementById("pep1").value = msg;
}

function closeCalculator() {
  document.getElementById("calculator").style.display = "none";
}

function openCalculator() {
  document.getElementById("calculator").style.display = "";
}

function about() {
  msg = "เครื่องคิดเลข (Calculator)\n===============\n\n";
  msg += "พัฒนาโดย James Crooke\nhttp://www.cj-design.com";
  alert(msg);
}

var ie = document.all;
var ns6 = document.getElementById && !document.all;
var dragapproved=false;
var z, x, y;

function move(e) {
  if (dragapproved) {
    z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x;
    z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y;
    return false;
  }
}

function drags(e) {
  if (!ie&&!ns6)
  return;
  var firedobj = ns6? e.target : event.srcElement;
  var topelement = ns6? "HTML" : "BODY";
  while (firedobj.tagName != topelement&&firedobj.className != "drag") {
    firedobj = ns6? firedobj.parentNode : firedobj.parentElement;
  }
  if (firedobj.className == "drag") {
    dragapproved = true;
    z = firedobj;
    temp1 = parseInt(z.style.left+0);
    temp2 = parseInt(z.style.top+0);
    x = ns6? e.clientX: event.clientX;
    y = ns6? e.clientY: event.clientY;
    document.onmousemove=move;
    return false;
  }
}
document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");
// -->
</script>
</head>

<body onLoad="closeCalculator();return false">

<input name="pep1" type="text" id="pep1"/>
<a href="#" onclick="openCalculator();return false">
<img src="http://www.codetukyang.com/java/images2/calclose.gif" style="position:relative;top:-1px" width="13" height="13"/></a><br>

<input name="pep2" type="text" id="pep2"/><br>
<input name="pep3" type="text" id="pep3"/><br>
<input name="pep4" type="text" id="pep4"/><br>
<input name="pep5" type="text" id="pep5"/><br>


<center>
<div id="demo">
  <form onsubmit="calculate(); return false;">
  <div id="calculator" class="drag">
    <div class="calculatorcontainer">
      <div id="version">เครื่องคิดเลข (Calculator)</div>
      <div id="control"><a href="#" onclick="about();return false">
        <img src="http://www.codetukyang.com/java/images2/calq.gif" width="16" height="16" /></a> <a href="#" onclick="closeCalculator();return false">

        <img src="http://www.codetukyang.com/java/images2/calclose.gif" style="position:relative;top:-1px" width="13" height="13"/></a></div>
      
      <input type="button" value="10" onclick="addToCalc(this.value)">
      <input type="button" value="20" onclick="addToCalc(this.value)">
      <input type="button" value="30" onclick="addToCalc(this.value)">
      <br />
      <input type="button" value="40" onclick="addToCalc(this.value)">
      <input type="button" value="50" onclick="addToCalc(this.value)">
      <input type="button" value="60" onclick="addToCalc(this.value)">
      <br />
      <input type="button" value="70" onclick="addToCalc(this.value)">
      <input type="button" value="80" onclick="addToCalc(this.value)">
      <input type="button" value="90" onclick="addToCalc(this.value)">
      <br />      
      <input type="button" value="0" onclick="addToCalc(this.value)">
      <input type="button" value="00" onclick="addToCalc(this.value)">
      <input type="button" value="+" onclick="addToCalc(this.value)" class="operation">
      <br />      
      <input type="button" value="-" onclick="addToCalc(this.value)" class="operation">
      <input type="button" value="c" onclick="resetCalc()" class="operation">
      <input type="button" value="=" onclick="calculate()" class="equals">
    </div>
  </div>

  </form>
</div>
</center>
</body>

</html>

Tag : PHP, JAVA

ประวัติการแก้ไข
2012-10-23 19:49:25

Date : 2012-10-23 00:49:50

By : jingjok07

View : 2575

Reply : 3

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

Code (JavaScript)

<!doctype html>

<html>
    <head>
        <meta charset = "utf-8">

        <script type = "text/javascript">
            window.addEventListener ("load", function () {
                var input = document.getElementsByTagName ("input");

                input[0].addEventListener ("keydown", function () {
                    alert ("Caret position: " + this.selectionStart);

                    // You can also set the caret: this.selectionStart = 2;
                }, false);
            }, false);
        </script>

        <style></style>

        <title>Test</title>
    </head>

    <body>
        <input type = "text" />
    </body>
</html>

Date : 2012-10-24 09:34:10

By : mr.win

No. 2

โพสกระทู้ ( 72 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : mr.win เมื่อวันที่ 2012-10-24 09:34:10

รายละเอียดของการตอบ ::

ไม่ได้ครับ ลองแล้ว

Date : 2012-11-02 12:18:20

By : jingjok07

No. 3

jack

โพสกระทู้ ( 210 )
บทความ ( 0 )

ตรงบรรทัดเริ่มที่ 230
ตัวลิงค์ไปที่เครื่องคิดเลขทำไว้แค่ฟิลด์เดียวเองครับ ลองเพิ่มฟิลด์ที่เหลือให้ครบ

Code (JavaScript)


<input name="pep1" type="text" id="pep1"/>
<a href="#" onclick="openCalculator();return false">
<img src="http://www.codetukyang.com/java/images2/calclose.gif" style="position:relative;top:-1px" width="13" height="13"/></a><br>

<input name="pep2" type="text" id="pep2"/><br>
<input name="pep3" type="text" id="pep3"/><br>
<input name="pep4" type="text" id="pep4"/><br>
<input name="pep5" type="text" id="pep5"/><br>

Date : 2012-11-02 17:07:23

By : dreamlover

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ต้องการให้ javascript เครื่องคิดเลข แสดงผลตรงที่ เคอเซอร์ กระพริบอยู่

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก