如何在文本框中禁用光標並在點擊時切換其值？

Question

我有一系列文本框，如下所示，我必須禁用光標，並在單擊文本框時在“X”和“'之間切換其值。 這是我寫的代碼：

HTML代碼：

<input type="text" name="loan1" id="crossCheck1" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

<input type="text" name="loan2" id="crossCheck2" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

<input type="text" name="loan3" id="crossCheck3" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' style=" width: 13px; height:13px; border-style:none;font-weight:bold; font-family:Arial Narrow; font-size:14px; color:#000000;margin-left:85px;cursor:hand"/>

使用Javascript：

$(document).ready(function() {
        $( ".crossCheck" ).click(function() {

            var cross =  $('#crossCheck1').val();
            var check = 'X' ;
            if(cross == "" ){
                document.getElementById("crossCheck1").value= check;
            }else{
                document.getElementById("crossCheck1").value= '';
            }

        });  
});

1.這里，當內容改變時，光標可以看到，你能告訴我一種刪除光標的方法。

2.你能告訴我如何改變只被點擊的文本框中的值？

Here演示

更新：

Idont想要文本框中的任何光標，是否可以完全刪除它

Answer 1

在readonly textarea中禁用游標的另一種簡單方法是

<textarea readonly onfocus="this.blur()">Content</textarea>

我在Firefox ESR 24.1.0和chorme 30.0.1599.101 m中進行了測試。 在chrome中，onfocus =“this.blur（）”無關緊要

Answer 2

$(document).ready(function() {
    $( ".crossCheck" ).click(function() {

        var cross =  $(this).val();
        var check = 'X' ;
        if(cross == "" ){
            $(this).val(check).css("cursor","none");// set value and remove cursor
        }else{
             $(this).val().css("cursor","pointer");// set cursor
        }

    });  
});

在jquery中引用css

Answer 3

編輯

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(document).ready(function() {
        jQuery(".crossCheck").click(function() {
            var cross =  jQuery(this);
            var check = 'X' ;
            if(cross.val() == "" ){
                cross.val(check);
                cross.css("cursor","default");
            }else{
                cross.val('');
                cross.css("cursor","none");
            }
        });  
  });
  </script>
</head>
<body>
<input type="text" name="loan1" id="crossCheck1" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1'/>

<input type="text" name="loan2" id="crossCheck2" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1' />

<input type="text" name="loan3" id="crossCheck3" class="crossCheck" onfocus="this.blur()" readonly="readonly" maxlength='1'/>
</body></html>

我真的不明白你，因為我的英語不好但是這段代碼，當空白時隱藏光標，當輸入包含'X'時隱藏光標，

如何在文本框中禁用光標並在點擊時切換其值？

問題描述

3 個解決方案

解決方案1
2 2013-11-05 08:44:37

解決方案2
0 2013-08-29 06:31:14

解決方案3
0 2013-08-29 06:32:35

如何在文本框中禁用光標並在點擊時切換其值？

問題描述

3 個解決方案

解決方案1 2 2013-11-05 08:44:37

解決方案2 0 2013-08-29 06:31:14

解決方案3 0 2013-08-29 06:32:35

解決方案1
2 2013-11-05 08:44:37

解決方案2
0 2013-08-29 06:31:14

解決方案3
0 2013-08-29 06:32:35