javascript - 使用 Javascript 在输入时验证 textarea

Question

我找到了以下 JQUERY 脚本来执行此操作：

$(document).ready(function(){
 $('textarea').on('keypress', function(e) {
   var val = $('textarea').val();
   var validaterror = document.getElementById('errorvalidate');
   if (e.which == 13) {
     if(! /\S/.test(val)) {
       validaterror.textContent = 'Please enter domain names in the field.';
       return false;
     }
     validaterror.textContent = '';
   }
 });
});

但我不想在我的网站上使用 Jquery，因为我对页面速度很着迷，这是我网站上使用 Jquery 并希望将该 jquery 转换为 Javascript 的单个脚本。请在这件事上帮助我。

Answer 1

尝试这个，

脚本

document.getElementById('textId').onkeypress = function (e) {
    var val = this.value;
    var validaterror = document.getElementById('errorvalidate');
    if (e.which == 13) {
        if (!/\S/.test(val)) {
            validaterror.innerHTML = 'Please enter domain names in the field.';
            return false;
        }
        validaterror.innerHTML = '';
    }
}

HTML

<textarea id="textId"></textarea>
<div id='errorvalidate'></div>

Answer 2

首先处理事件

var handleEvent = function(_obj, _execute, _eventName) {
    // Check for browser support of event handling capability
    if (_obj.addEventListener)
        _obj.addEventListener(_eventName, _execute, false);
    else if (_obj.attachEvent)
        _obj.attachEvent('on'+_eventName, _execute);
    else
        _obj['on'+_eventName] = _execute;
}

验证内容

var validate = function (){
    var obj = document.getElementById('textarea');
    var val = obj.value;
    var validaterror = document.getElementById('errorvalidate');
    if (e.which == 13) {
         if(! /\S/.test(val)) {
           validaterror.textContent = 'Please enter domain names in the field.';
           return false;
         }
         validaterror.textContent = '';
    }
}

把所有东西放在一起：

var textarea = document.getElementById('textarea');
handleEvent(textarea, validate, 'keypress');

Answer 3

好吧，你可以一点一点地替换它：

$(document).ready(function(){

就像：

if (document.readyState === "complete") // jQuery uses an interval to check this.

和

$('textarea').on('keypress', function(e) {

就像：

document.getElementById("your_textarea").onkeydown = function(evt) {
    // do what you like
};

和

$('textarea').val();

就像：

document.getElementsByTagname('textarea')[0].value // or give it an id and use getElementById

Answer 4

尝试这样的事情

JAVASCRIPT

        function validateMe(obj){
           var val = obj.value;
           var validaterror = document.getElementById('errorvalidate');
           if (e.which == 13) {
             if(! /\S/.test(val)) {
               validaterror.textContent = 'Please enter domain names in the field.';
               return false;
             }
             validaterror.textContent = '';
           }

        }

代码

<textarea rows="10" cols="5" onkeypress="validateMe(this)"></textarea>

Answer 5

window.onload=function(){
 document.getElementsByTagName('textarea').addEventListener('keypress', function(e) {
   var val = document.getElementsByTagName('textarea').value;
   var validaterror = document.getElementById('errorvalidate');
   if (e.which == 13) {
     if(! /\S/.test(val)) {
       validaterror.textContent = 'Please enter domain names in the field.';
       return false;
     }
     validaterror.textContent = '';
   }
 });
};