如何將光標移動到Dart中的元素？

剛開始使用dartlang並將項目樣本擴展了一點。看來，類Element的焦點方法不起作用，或者我沒有正確使用它。希望通過「關注」「錯誤」來獲得驗證行爲。這裏是我的代碼...如何將光標移動到Dart中的元素？

#import('dart:html'); 

num rotatePos = 0; 

var nameField; 

const DEFAULT_VALUE = "Click here!"; 

void main() { 

    query("#text").text = DEFAULT_VALUE; 

    query("#submit").on.click.add(rotateText); 
} 

void rotateText(Event event) { 
    rotatePos += 360; 

    nameField = query("#name"); 

    var textElement = query("#text"); 

    String insertedName = nameField.value; 

    textElement.style.transition = "1s"; 
    textElement.style.transform = "rotate(${rotatePos}deg)"; 

    updateFromElement(textElement, insertedName); 
} 

void updateFromElement(Element textElement, String value) { 

    Element errorField = query("#errorValue"); 

    if (value == "") { 
    errorField.text = "Text Field is empty, please insert a value!"; 
    errorField.style.color = "red"; 
    textElement.text = DEFAULT_VALUE; 
    textElement.focus(); 
    } else { 
    textElement.text = value; 
    errorField.text = ""; 
    } 
}

Element.focus（）似乎不工作，也許我誤解了這裏的東西。同時加入HTML文件以便更好地理解：

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sandbox</title> 
    <link rel="stylesheet" href="sandbox.css"> 
    </head> 
    <body> 
    <h1>Sandbox</h1> 

    <p>Dart Sandbox</p> 

    Enter any text: <input type="text" id="name"> <input type="button" value="Submit" id="submit"> <div id="error"><p id="errorValue"></div> 

    <div id="container"> 
     <p id="text"></p> 
    </div> 

    <script type="application/dart" src="web/sandbox.dart"></script> 
    <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script> 
    </body> 
</html>

來源

2012-09-25 Ed Michel

我只是試着嘲笑你的樣品。將幾個組件添加到HTML中以粗略創建相同的效果。我發現您的問題：

var textElement = query("#text"); 
// .... 
updateFromElement(textElement, insertedName);

你傳遞的TextElement這是一個<P>（段落）元素。不是文本字段。所以你不能在它上面調用focus（）。試試這個：

updateFromElement(nameField, insertedName);

來源

2012-09-25 13:56:27

感謝馬特B，我能夠看到錯誤...我不會像他所建議的那樣改變參數。無論如何，這是一個醜陋的模式。但要使其正常工作，只需交換以下行：

- textElement.focus（）;
+ nameField.focus（）;

而且該方法更好的措辭是「updateToElement（元targetElement，字符串值）」

來源

2012-09-25 14:25:36

真實的，但與示例代碼你有以上，就是這個變化名稱字段不會將無法正常工作在那個範圍內，因爲它是在rotateText函數中定義的，而不是你的updateFromElement。也就是說，將這個額外的函數與rotateText合併將是一個合適的方法，然後進行上面提到的更改。 :) –

當然，nameField是一個「類成員」像rotatePos和DEFAULT_VALUE ...它只是在rotateText分配。我可以在文件範圍內的任何空白處引用它。但我明白你的觀點，整個設計從開發POV不易理解... –

如何將光標移動到Dart中的元素？

回答

相關問題