如何将光标放在文本框中

Question

我想在文本框中显示光标，如下图

我使用onclick事件在文本框中输入数字。我在输入字段上使用了i，因为我的要求是禁用本机键盘。

HTML代码

readonly

JavaScript代码

<form Name="calc" method="post">
    <input class="intxt1" autocomplete="off" id="pt_fname" name="display" type="tel" value="" readonly>
    <button class="cancel-icon" type="reset" onClick="Clear()"></button>

    <script>
        // Check browser support
        if (typeof(Storage) !== "undefined") {
            document.getElementById("pt_fname").value = localStorage.getItem("firstname");
        }
    </script>

    <div style="width:1260px; "> 
        <div class="keypad" style="margin: 30px auto;">
            <!-- Screen and clear key -->
            <div class="kb_keys">
                <!-- operators and other keys -->
                <span onClick="AddDigit('q')">Q</span>
                <span onClick="AddDigit('w')">W</span>
                <span onClick="AddDigit('e')">E</span>
                <span onClick="AddDigit('r')">R</span>
                <span onClick="AddDigit('t')">T</span>
                <span onClick="AddDigit('y')">Y</span>
                <span onClick="AddDigit('u')">U</span>
                <span onClick="AddDigit('i')">I</span>
                <span onClick="AddDigit('o')">O</span>
                <span onClick="AddDigit('p')">P</span>

                <div style="margin-left:35px;">
                    <span onClick="AddDigit('a')">A</span>
                    <span onClick="AddDigit('s')">S</span>
                    <span onClick="AddDigit('d')">D</span>
                    <span onClick="AddDigit('f')">F</span>
                    <span onClick="AddDigit('g')">G</span>
                    <span onClick="AddDigit('h')">H</span>
                    <span onClick="AddDigit('j')">J</span>
                    <span onClick="AddDigit('k')">K</span>
                    <span onClick="AddDigit('l')">L</span>
                    <span onClick="AddDigit('\&#39;')">'</span>
                </div>

                <span onClick="AddDigit('')" style="width: 88px;">
                    <div class="uparw"></div>
                </span>
                <span onClick="AddDigit('z')">Z</span>
                <span onClick="AddDigit('x')">X</span>
                <span onClick="AddDigit('c')">C</span>
                <span onClick="AddDigit('v')">V</span>
                <span onClick="AddDigit('b')">B</span>
                <span onClick="AddDigit('n')">N</span>
                <span onClick="AddDigit('m')">M</span>
                <span onClick="AddDigit('.com')">.com</span>
                <span onClick="AddDigit('@')">@</span>

                <span onClick="AddDigit('-')">-</span>
                <span onClick="AddDigit('_')">_</span>
                <span onClick="AddDigit(' ')" style="width: 605px;"></span>
                <span class="clear" onClick="backspace()" style="width: 125px;">
                    <div class="xBox1">X<div style="color: #26444F; margin-top: -20px; margin-left: 25px; font-size: 19px;">Delete</div></div>
                </span>
            </div>
        </div>

        <div class="calculator" style="margin: 30px auto; float:right;">
            <!-- Screen and clear key -->

            <div class="keys">
                <!-- operators and other keys -->
                <span onClick="AddDigit('1')">1</span>
                <span onClick="AddDigit('2')">2</span>
                <span onClick="AddDigit('3')">3</span>

                <span onClick="AddDigit('4')">4</span>
                <span onClick="AddDigit('5')">5</span>
                <span onClick="AddDigit('6')">6</span>

                <span onClick="AddDigit('7')">7</span>
                <span onClick="AddDigit('8')">8</span>
                <span onClick="AddDigit('9')">9</span>

                <span onClick="AddDigit('.')">.</span>
                <span onClick="AddDigit('0')">0</span>
                <span onClick="AddDigit('#')">#</span>
            </div>
        </div>
    </div>
</form>

如果用户删除输入字段中的信息，则应该存在光标，如上图所示。我不明白我应该如何做到这一点。

我不太了解javascript。谁能告诉我应该如何实现呢？

Answer 1

在CSS中，有一个cursor property。通常情况下，我建议您将此应用为常量，但如果您希望在根据特定事件悬停在元素上时替换光标，则可以使用JavaScript setAttribute应用/删除该样式或jQuery的css方法。

Vanilla JavaScript

document.getElementById('yourElement').setAttribute(style, 'cursor') === "pointer";

http://www.w3schools.com/jsref/met_element_setattribute.asp

的jQuery

$("#yourElement").css("cursor", "pointer");

http://www.w3schools.com/jquery/css_css.asp