Question

当前：文本字段中的文本当前不可编辑，退格按钮不会删除任何字符，右键单击剪切复制粘贴已被禁用。但是，一旦我将一些文本添加到现有的不可编辑文本中，我就可以使用箭头键移动字符并删除其中的一些。

目标：我希望修改不可编辑的文本，以便我不能使用右键单击退格，删除，剪切复制粘贴，最重要的是，箭头键移动到删除。我希望这可以使用JQuery完成。

代码如下：

XHTML：

$(document).ready(function() {
    $('#contenttitle').html($('.hiddenbred').html());
    $('.newsflash').css('display','none');  
    disableHalfText();
}

jsscript： $（文件）。就绪（函数（）{
$（ '服务名'）。在（ “文本菜单” 功能（E）{ 返回false; }）; }）;

function disableHalfText(){

var readOnlyLength = $('.servicename').val().length;

$('.servicename').on('keydown', function(event) {
    var $field = $(this);
    if ((event.which != 37 && (event.which != 39))
            && ((this.selectionStart < readOnlyLength)
                    || ((this.selectionStart == readOnlyLength) &&    (event.which == 8)))) {
        return false;
      }
   }); 
}

输出看起来像这样：
服务名称：TextNotEditable_addUserTextHere

我的重点是如何在使用箭头键导航后禁用任何删除。提前谢谢。

Answer 1

您可以为<input>元素提供属性＆＃34;禁用＆＃34;并使用user-select CSS属性（带有前缀以实现兼容性）。 JQuery可以切换这些东西以实现期望的结果，例如单击按钮切换输入框时，如：

使用Javascript：

$(document).on('click tap', '#toggle-button', function() {
    var current = $(".input-toggle").prop("disabled"); // Get current state: disabled = true?

    $(".input-toggle")
        .prop("disabled", !current) // set to the opposite of the current state
        .toggleClass('no-select'); // don't let the user select!

});

CSS：

no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Example fiddle here - 尽情享受！

如何使用jquery使文本完全不可编辑

1 个答案: